javascript - 不透明背景中的非不透明文本

Question

旋转热门问题。在这种情况下，我有一个 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;
}

Answer 1

您可以通过在 :hover 上的背景 RGBA 颜色上添加过渡来简化 HTML 和 CSS。 ，最后一个值是不透明度。由于您只是过渡背景，因此文本不受影响。

Demo Fiddle

<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);
}