Javascript 不透明背景中的非不透明文本

围绕这个热门问题展开讨论。在本例中，我有一个div，我想在鼠标悬停时使其变暗，而不是使其中的文本变暗。我已经走了一半了；如果我将鼠标移到包含文本的div之外的任何div中，就可以实现这一点

以下是我的尝试：。请注意，如果鼠标位于长方体顶部区域上方，则不会出现悬停效果

HTML

---

您可以通过在

：hover

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

Hello World

CSS

---

您可以通过在

：hover

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

Hello World

CSS

---

SW4答案的可能重复是最好的解决方案，但是如果出于任何原因您想要保留您的结构，那么您可以使用复杂的选择器，如

#text:hover~#box>#不透明

，然后更改不透明性。（严格不推荐）。使用

#text:hover~#box>#不透明{opacity:0.6；}

这是最好的解决方案，但如果出于任何原因，您希望保留结构，则可以使用复杂的选择器，如

#text:hover~#box>#opace

，然后更改不透明性。（严格不推荐）。使用

#text:hover~#box>#不透明{opacity:0.6；}

即可

<div id="text">Hello World</div>
<div id="box">
    <div id="opaque"></div>
</div>

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

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