CSS3トランジション

Question

CSS3トランジションのみを使用してボタン/ divタグを上書きするときに、ページの背景色を変更したいと思います。私は徐々に色が来て、トランジションエフェクトを使用したいのですが、divのホバーイベントにページの背景色を関連付ける方法がわかりません。誰かが私のコードで私を助けてくれますか？ありがとうございました

Answer 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/

---

効率を最大にするために、あなたのセレクタをキャッシュする必要があります。

Answer 2

実際、I'm doing it hereのようなCSS3トランジションアニメーションを使用すると、身体の背景色を変更することができます。私はhereから論理を得ました。