在悬停其他元素时更改身体背景图像/渐变答案

【问题标题】：change body background image/gradient on hovering other elements在悬停其他元素时更改身体背景图像/渐变
【发布时间】：2012-08-10 01:21:37
【问题描述】：

我试图在悬停在 div (id="above") 上时更改身体的背景图像/渐变，我按照他们在另一篇文章中所做的方式 (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 从父元素到子元素，你不能从子元素引用父元素。
font-weight: italic; 无效应该是font-style:italic
另外，没有h1.title，只有h1#title。
@TheZ 谢谢！但是知道如何参考父母吗？到底有没有？
@ryf9059 在 CSS 中我会说不，Javascript 可以做到。 CSS 之所以如此之快，是因为它不必向后看层次结构，它只适用于向下。

标签： html css

【解决方案1】：

如果你想用 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
}

【讨论】：

【解决方案2】：

由于body 不是div.about 的后代，因此不能这样定位它。不过你可以使用一点 JavaScript 来实现你需要的效果。

CSS

body {
    background: -webkit-gradient(radial, ...);
}

body.hover {
    background: -webkit-gradient(radial, ...); // new gradient
}

JavaScript

document.getElementsByClassName('about')[0].onmouseover = function () {
    document.getElementsByTagName('body')[0].className += ' hover';
}
document.getElementsByClassName('about')[0].onmouseout = function () {
    var n = document.getElementsByTagName('body')[0];
    n.className = n.className.replace('hover', '');
}

【讨论】：

我其实是想用CSS，因为我想把它和最新的过渡技术结合起来，让我的背景渐变变得平滑，javascript会实现这个效果吗？
您可以使用 jQuery 为更改设置动画...但也许您最好的方法是更改标记而不是脚本，正如@Oriol 在他/她的回答中描述的那样。