改变身体背景图像/渐变在悬停其他元素 [英] change body background image/gradient on hovering other elements
问题描述
我试图改变背景图像/身体的梯度，当悬停在一个div（id =上面），我按照他们在另一个职位的方式（http://stackoverflow.com/questions/ 1462360 / css-hover-one-element-effect-for-multiple-elements）但似乎不起作用。
I'm trying to change the background image/gradient of the body while hovering on a div (id="above"), I follow the way they do in another post (http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements) but it doesn't seems to work
css
body {
background: -webkit-gradient(radial, ...);
}
.about:hover body{
background: -webkit-gradient(radial, ...); // new gradient
}
html
<body>
<div class="about">
<h1 id="title">About</h1>
<div>
<p id="about">stuff</p>
</div>
</div>
</body>
这没有效果，我甚至尝试通过将标题样式更改为斜体来测试这是否工作hovering，still no use
This has no effect, I even try to test if this works by changing the title style to italic while hovering, still no use
.about:hover h1.title {
font-weight: italic;
}
这是我使用的方式是错误的还是有别的，任何人可以帮助？
Is that the way I use it is wrong or there is something else, anyone can help?
推荐答案
如果你想用CSS（无javascript） $ c> z-index ：
If you want to do it with CSS (no javascript), you can do a trick with z-index:
查看示例： http://jsfiddle.net/nCyJ4/
或者，在您的情况下， http://jsfiddle.net/nCyJ4/1/ ：
Or, in your case, http://jsfiddle.net/nCyJ4/1/ :
HTML：
<div class="initial background" id="bg0"></div>
<div class="about bgwrapper">
<h1 id="title">About</h1>
<div>
<p id="about">stuff</p>
</div>
<div id="bg1" class="background"></div>
</div>
CSS：
.background{
position:fixed;
top:0;left:0;
width:100%;height:100%;
display:none;
z-index:-1;
}
.bgwrapper:hover>.background,.initial.background{
display:block;
}
.initial.background:hover{
display:block!important;
}
.background:hover{
display:none!important;
}
#bg0{
background: -moz-linear-gradient(left, #FF0000 0%, #FF9900 10%, #FFFF00 16.666%, #CCFF00 20%, #32FF00 30%, #00FF00 33.333%, #00FF65 40%, #00FFFF 50%, #00FFFF 50%, #0065FF 60%, #0000FF 66.666%, #3300FF 70%, #CB00FF 80%, #FF00FF 83.333%, #FF0098 90%, #FF0004 100%);
}
#bg1{
background: -moz-linear-gradient(left center, #FF0000, #000000) repeat scroll 0 0 transparent
}
这篇关于改变身体背景图像/渐变在悬停其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
