如何在悬停时轻轻改变div背景？
如何在悬停时轻轻改变div背景？
提问于 2013-08-30 19:07:02
当用户在页面上悬停一个特定的链接时，我正在寻找一种方法来更改页面主体的背景(我计划根据链接悬停将背景更改为不同的颜色)，但我打算让这个效果柔和地工作，就像CSS中的过渡效果一样。有什么办法吗？使用JS甚至CSS？
对于悬停效果，我将使用JQuery的悬停函数，但我无法找到任何方法来进行软转换。
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-08-30 19:26:22
只有相对宽松的CSS才能做到这一点，并使用绝对定位的div作为主体。
演示http://jsfiddle.net/kevinPHPkevin/Hc7UW/3/
#body {
background: #ccc;
position: absolute;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
a.one:hover ~ #body {
background: blue;
}
a.two:hover ~ #body {
background: red;
}
a.three:hover ~ #body {
background: yellow;
}你可以找到更多的信息，这里
编辑的- jQuery版本
选择父母的方法(你需要使用jQuery )。它可以很容易地应用。我这样做的方式，所以我不需要创建很多类等等，就是给a一个id，这是名字的颜色。然后我会用它作为颜色的标识符。
演示http://jsfiddle.net/kevinPHPkevin/Hc7UW/5/
$('a').hover(function(){
$('body').css('background', this.id);
}, function(){
$('body').css('background', '#ccc');
});Stack Overflow用户
发布于 2013-08-30 19:11:00
您应该能够调整在这个问题中找到的答案，以适应您的需要。您可以将$(this)替换为要使用的实际选择器(想必是$('body'))。请记住，在常规的jQuery库之上需要一个额外的库( jQuery UI或jQuery颜色插件)。
Stack Overflow用户
发布于 2013-08-30 19:20:14
使用jQuery + CSS3转换的解决方案：
http://jsfiddle.net/r3wCE/
jQuery：
$b = $('body');
$('a').mouseover(function(){ $b.toggleClass('red', true ); })
.mouseout( function(){ $b.toggleClass('red', false ); });CSS：
body {
-webkit-transition: background-color 2s;
-moz-transition: background-color 2s;
-o-transition: background-color 2s;
transition: background-color 2s;
background-color: white;
}
body.red {
background-color: red;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18539906
复制相关文章
相似问题
腾讯云开发者
