Javascript 不透明度和处理'；悬停'；在那些

这是一个关于如何使用JS解决方案处理重叠元素的不透明度并使其在悬停时保持一致的Q/a

要求 要求开发两个透明且重叠的元素，如下面的两个红色框。这些需要是透明的，以便背景内容可见

现在，当鼠标悬停在这些元素中的任何一个上时，特定的元素应该变成不透明的，如下所示

解决方案 正如需求中所描述的，解决方案从创建两个元素开始，并且可能创建这些元素的包装器

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

下面的代码行表示重叠

.second {
  margin-left: 50px;
  margin-top: -50px;
}

问题在于，重叠区域的不透明度不一致，并且阴影较暗

请注意，这不是浏览器的bug，并解释了这种行为的原因

---

正确的方法 处理这种情况的更好方法是避免使子元素透明，而是在父级设置“不透明度”。悬停时，使用JS在父对象和子对象之间切换这些不透明度级别

$(".first, .second").hover(function() {
  $(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});

此外，在重叠区域上悬停会由于堆栈顺序的更改而导致闪烁，这可以通过将

z-index

设置为悬停元素来处理

.first:hover,
.second:hover {
  z-index: 1;
}

---

希望这能有所帮助。

下面是另一种使用

无论何时将鼠标悬停在某个元素上，都会禁用另一个元素上的

指针事件

：

$（'.first'）。悬停(
（）=>{$（'.second'）.css（{'pointer-events'：'none'}），
（）=>{$（'.second'）.css（{'pointer-events'：'auto'}）
})
$（'.second'）。悬停(
（）=>{$（'.first'）.css（{'pointer-events'：'none'}），
（）=>{$（'.first'）.css（{'pointer-events'：'auto'}）
})

*{
框大小：边框框；
填充：0；
保证金：0；
边界：0；
}
身体{
背景图像：线性梯度（45度，透明50%，75%）；
背景尺寸：20px 20px；
}
.包装纸{
边缘顶部：10px；
左边距：10px；
}
.首先{
宽度：100px；
高度：100px；
背景：rgba（255,0,0,0.6）；
}
.第二{
宽度：99px；
高度：98px；
利润上限：-49px；
左边距：50像素；
背景：-webkit线性梯度（透明50%，rgb（255，0，0）50%），webkit线性梯度（0度，透明50%，rgb（255，0，0）50%）；
不透明度：0.6；
}
.第一：悬停，
.第二：悬停{
背景：rgba（255,0,0,1）；
不透明度：1；
}

---

有一个只使用CSS的解决方案，这使它更有效率。例如：

正文{
背景图像：线性梯度（45度，透明50%，75%）；
背景尺寸：20px 20px；
}
#a{
位置：绝对位置；
宽度：150px；
高度：150像素；
顶部：50px；
左：50px；
背景：rgba（255,0,0,1）；
}
#b{
位置：绝对位置；
宽度：150px；
高度：150像素；
顶部：125px；
左：125px；
背景：rgba（255,0,0,1）；
}
#包装纸{
不透明度：0.5；
}
/*而不是改变课程，
您可以使用如下选择器：*/
#包装器：悬停#a：悬停，
#包装器：悬停#b：悬停{
不透明度：1；
z指数：10；
}
#包装器：悬停{
不透明度：1；
}
#包装器：悬停#b，
#包装器：悬停#a{
不透明度：0.5；
z指数：-1；
}

---

我尝试在绝对位置使用元素。在这种情况下，我可以在鼠标进入时将它们移动到

包装器的顶部，然后通过纯JavaScript返回到鼠标离开时的位置

我已将示例扩展到3个元素，其中代码显示了工件，并添加了边框以实际查看重叠


HTML：

<div id=top>
  <div id=wrapper>
    <div class="first" onMouseEnter="hover3b(event)" onMouseLeave="hover3e(event)"></div>
    <div class="second" onMouseEnter="hover3b(event)" onMouseLeave="hover3e(event)"></div>
    <div class="third" onMouseEnter="hover3b(event)" onMouseLeave="hover3e(event)"></div>
  </div>
</div>

JavaScript：

var from = null; // remember where to put back the element
function hover3b(e) {
  var t = e.target;
  from = t.nextElementSibling;
  if (!from)
    from = null;
  document.getElementById("top").appendChild(t);
}
function hover3e(e) {
  document.getElementById("wrapper").insertBefore(e.target, from);
}

我认为悬停部分在这里不太相关。@appleapple-你为什么这么认为？至少，这是要求的一部分：）好吧，如果你能做第一个，我想第二个很简单。无论如何，谢谢你提出了这个有趣的问题。@appleapple-True:）这只是节省了人们推导逻辑的时间。你为什么要为你的问题创造一个悬赏，然后自己回答？想知道是否有更好的答案。“希望这有帮助。“是吗？@JorgeZuverza，我不确定你的意思。@JPeG，仅供参考，我上周已经回答了，但是悬赏是昨天创建的，目的是看看是否有更好的解决方案。上面还有一些是其他用户发布的。css才是最好的，你知道如何让它们透明吗？@Scaramouche不知道你的意思，在这个例子中它们是透明的。我添加了背景，让它更明显。太好了。我不知道那些选择器有多个
悬停
。这仍然不能解决重叠区域不一致的不透明度问题。请检查我的答案，看看它是如何处理的。这也是一个有效的解决方案。感谢你的努力。
body {
  background-image: linear-gradient(45deg, transparent 50%, #aaa 75%);
  background-size: 20px 20px;
}

.first, .second, .third {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  border: 3px solid black;
}

#wrapper {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 3px solid green;
  opacity: 0.6;
}

.first { left: 0px; top: 0px; }
.second { left: 80px; top: 80px; }
.third { left: 160px; top: 160px; }

var from = null; // remember where to put back the element
function hover3b(e) {
  var t = e.target;
  from = t.nextElementSibling;
  if (!from)
    from = null;
  document.getElementById("top").appendChild(t);
}
function hover3e(e) {
  document.getElementById("wrapper").insertBefore(e.target, from);
}