javascript - 具有不透明度的重叠元素并处理这些元素上的 'hover'

Question

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

要求

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

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

Answer 1

有一个纯 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>