在悬停其他元素时更改身体背景图像/渐变
Posted
技术标签:
【中文标题】在悬停其他元素时更改身体背景图像/渐变【英文标题】:change body background image/gradient on hovering other elements 【发布时间】:2012-08-10 01:21:37 【问题描述】:我试图在悬停在 div (id="above") 上时更改身体的背景图像/渐变,我按照他们在另一篇文章中所做的方式 (http://***.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
<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 之所以如此之快,是因为它不必向后看层次结构,它只适用于向下。
【参考方案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 在他/她的回答中描述的那样。以上是关于在悬停其他元素时更改身体背景图像/渐变的主要内容,如果未能解决你的问题,请参考以下文章