这是一个关于如何使用 JS 解决方案处理重叠元素的不透明度并使其在悬停时保持一致的问答。
要求
要求是开发两个元素，透明且重叠，如下图两个红框。这些需要是透明的，以便背景内容可见。
现在，当鼠标悬停在任何这些元素上时，特定元素应该变得不透明，如下所示。
有一个仅 CSS 的解决方案，这使得它更加高效。例如这样：
body {
background-image: linear-gradient(45deg, transparent 50%, #aaa 75%);
background-size: 20px 20px;
}
#a {
position: absolute;
width: 150px;
height: 150px;
top: 50px;
left: 50px;
background: rgba(255, 0, 0, 1);
}
#b {
position: absolute;
width: 150px;
height: 150px;
top: 125px;
left: 125px;
background: rgba(255, 0, 0, 1);
}
#wrapper {
opacity: 0.5;
}
/* instead of changing the classes,
you can use selectors like this:*/
#wrapper:hover #a:hover,
#wrapper:hover #b:hover {
opacity: 1;
z-index: 10;
}
#wrapper:hover {
opacity: 1;
}
#wrapper:hover #b,
#wrapper:hover #a {
opacity: 0.5;
z-index: -1;
}
<div id=wrapper>
<div id="a">
</div>
<div id="b">
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
