旋转热门问题。在这种情况下,我有一个div,当我鼠标移动时我想变暗,而不是使其内部的文本变暗。我在那里;如果我将div鼠标悬停在包含文本的div之外的任何地方,我可以实现这一点。
这是我的尝试:http://jsfiddle.net/59M7N/。请注意,如果鼠标位于框的顶部区域,则不会发生悬停效果。
HTML
<div id="text">Hello World</div>
<div id="box">
<div id="opaque"></div>
</div>
CSS
#box {
height:200px;
width:200px;
border:5px solid black;
}
#opaque {
position:absolute;
width:200px;
height:200px;
background-color:black;
opacity:0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#opaque:hover {
opacity:0.6;
}
#text {
position:relative;
color:blue;
top:25px;
left:10px;
z-index:5;
}
答案 0 :(得分:5)
您可以通过在:hover
上添加背景RGBA颜色的转换来简化HTML和CSS,最后一个值是不透明度。当您仅转换背景时,文本不受影响。
<div id="box">Hello World</div>
CSS
#box {
height:200px;
width:200px;
border:5px solid black;
color:blue;
background:rgba(0, 0, 0, 0);
transition:background 200ms ease-in;
}
#box:hover {
background:rgba(0, 0, 0, .5);
}