CSS3 Transitions

Question

当用户仅使用CSS3转换将鼠标悬停在按钮/div标记上时，我想更改页面的背景色。我希望颜色逐渐变化，因此希望使用过渡效果，但我不知道如何将页面的背景颜色与div上的悬停事件联系起来。有人能帮我编写代码吗？谢谢

Answer 1

这在CSS3中目前是不可能的。

在未来（CSS4？），您将能够按照以下方式进行操作：

body {
    background-color: red;
    transition: background-color 1s ease;
}
$body #theButton:hover {
    background-color: green;
}

注意第二个选择器中的$；它指示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

事实上，使用CSS3过渡动画可以很容易地更改身体背景颜色，就像我在这里做的那样。我从这里得到了逻辑。