CSS3 过渡

Question

我想在将鼠标悬停在按钮/div 标记上时仅使用 CSS3 过渡更改页面的背景颜色。我希望颜色逐渐出现，因此想使用过渡效果，但我不知道如何将页面的背景颜色与 div 上的悬停事件相关联。有人可以帮我处理我的代码吗？谢谢你

Answer 1

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

将来 ( CSS4? )，您将能够按如下方式进行操作:

body {
    background-color: red;
    transition: background-color 1s ease;
}

$body #theButton:hover {
    background-color: green;
}

注意第二个选择器中的$；它指示 CSS block 适用于哪个元素。不幸的是，目前还没有一个这样的实现，因此您将不得不求助于 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');
});​​​​​​​​

这是 fiddle :http://jsfiddle.net/mWY88/1/

---

为了获得最大效率，您应该缓存您的选择器。