我试图在将鼠标悬停在 div (id="above") 上时更改 body 的背景图像/渐变，我按照他们在另一篇文章 (http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements) 但它似乎不起作用
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>
这没有效果，我什至尝试通过在悬停时将标题样式更改为斜体来测试它是否有效，但仍然没有用
.about:hover h1.title {
font-weight: italic;
}
是我使用方法不对还是有其他问题，谁能帮忙？
最佳答案
如果你想用 CSS(没有 javascript)来做，你可以用 z-index 做一个技巧:
请在此处查看示例:http://jsfiddle.net/nCyJ4/
或者，在您的情况下，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
}
关于html - 在悬停其他元素时更改主体背景图像/渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11940645/