CSS3トランジションのみを使用してボタン/ divタグを上書きするときに、ページの背景色を変更したいと思います。私は徐々に色が来て、トランジションエフェクトを使用したいのですが、divのホバーイベントにページの背景色を関連付ける方法がわかりません。誰かが私のコードで私を助けてくれますか?ありがとうございましたCSS3トランジション
0
A
答えて
1
これはCSS3では現在できません。将来的には
(CSS4?)以下のように、あなたはそれを行うことができるでしょう:
body {
background-color: red;
transition: background-color 1s ease;
}
$body #theButton:hover {
background-color: green;
}
ノート第2のセレクタで$
を。 CSSブロックが適用される要素を示します。残念ながら、これはまだ一度も実装されていないので、Javascriptに頼らざるを得なくてはなりません。
(jQueryのを使用して)更新:
CSS:
body {
background: red;
transition: background-color 1s ease;
}
body.hover {
background: green;
}
Javascriptを:
$('#theButton').hover(function(){
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
がここにフィドルです:http://jsfiddle.net/mWY88/1/
効率を最大にするために、あなたのセレクタをキャッシュする必要があります。
0
実際、I'm doing it hereのようなCSS3トランジションアニメーションを使用すると、身体の背景色を変更することができます。私はhereから論理を得ました。
関連する問題
- 1. CSS3トランジション、キーフレーム、アニメーション
- 2. スケール上のCss3トランジション
- 3. CSS3トランジションのJQueryフォールバック
- 4. CSS3のパースペクティブ、トランジション、トランジションをjQueryで変更
- 5. CSS3トランジションがトレイルを残す
- 6. CSS3背景画像トランジション
- 7. css3トランジション:フローティングアイテムの流体レイアウトアニメーション
- 8. CSS3トランジション:「トランジション:すべて」は「トランジション:x」よりも遅いですか?
- 9. CSS3トランジションのjQuery方向認識ホバー
- 10. CSS3トランジションが動作しない
- 11. CSS3トランジション/アニメーションが機能しない
- 12. トランジション付きの簡単なjQuery/CSS3メニュー
- 13. 横型CSS3アコーディオン固定遅れトランジション
- 14. css3(トランジション)が機能しない
- 15. CSS3トランジションの容易化とボックスシャドウ
- 16. CSS3トランジションでマウスオーバー/ホバーを遅らせる
- 17. CSS3トランジションによるSVG要素のアニメーション
- 18. css3 Webkitトランジション翻訳:無効なプロパティ値?
- 19. Windows PhoneブラウザでハードウェアアクセラレーションされたCSS3トランジション
- 20. CSS3トランジション - 私は私のCSS3トランジションの問題を抱えています同じ要素
- 21. RGBA BackgroundプロパティはCSS3トランジションでサポートされていませんか?
- 22. CSS3トランジションの展開/折りたたみを追加する
- 23. css3トランジションを常に同じ方向に回転させます
- 24. CSS3トランジションで色を追加して消したい
- 25. jquery animateでcss3トランジションを使用するには?
- 26. CSS3トランジションが正しく動作しない
- 27. HTML5 swipe.js css3トランジション。オフスクリーンレンダリングとページ要素のキャッシュ
- 28. CSS3トランジションでブラウザの動作が異なります
- 29. CSS3トランジション - アニメーション「アンカーポイント」を変更しますか?
- 30. jQueryUIのアニメーション化CSS3トランジションを使用した並べ替え
私はCSSでしかできないと思います。 – MarcinJuraszek