悬停不适用于分层元素

Question

我在同一个位置上有相同大小的div。但是他们没有背景，所以你不会看到元素在不同的容器中。 我现在遇到的问题是悬停事件只在最后一个容器中的元素上触发，因为它是在其他容器之上分层的。

＆＃13;

＆＃13;

#main {
  background: yellow;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 1;
}

.out {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  background: none;
  z-index: 5;
}

.in {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 10;
  opacity: 0.5;
}

.out:nth-of-type(1) .in {
  top: 40px;
  left: 40px;
  background: green;
}

.out:nth-of-type(2) .in {
  top: 120px;
  left: 120px;
  background: red;
}

.out:nth-of-type(3) .in {
  top: 200px;
  left: 200px;
  background: blue;
}

.in:hover {
  opacity: 1.0;
}

＆＃13;

<div id="main">
  <div class="out">
    <div class="in">DIV 1</div>
  </div>
  <div class="out">
    <div class="in">DIV 2</div>
  </div>
  <div class="out">
    <div class="in">DIV 3</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

是否可以强制悬停事件或者我是否必须将所有元素放入同一容器中（这可能在原始网站上没有那么好）？

我知道解释不是最好的，但我认为您应该理解的代码。 JSFiddle

Answer 1

如果可以的话，我会把它们放在同一个容器中。 对不起，我无法评论这么说。

Answer 2

您可以将所有这些放入同一个父元素（.out）并使用:nth-child()选择器来获取不同的颜色和位置。然后悬停工作：

#main {
  background: yellow;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 1;
}

.out {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  background: none;
  z-index: 5;
}

.in {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 10;
  opacity: 0.5;
}

.out .in:nth-child(1) {
  top: 40px;
  left: 40px;
  background: green;
}

.out .in:nth-child(2) {
  top: 120px;
  left: 120px;
  background: red;
}

.out .in:nth-child(3){
  top: 200px;
  left: 200px;
  background: blue;
}

.in:hover {
  opacity: 1.0;
}

<div id="main">
  <div class="out">
    <div class="in">DIV 1</div>
    <div class="in">DIV 2</div>
    <div class="in">DIV 3</div>
  </div>
</div>

Answer 3

我通过将pointer-events: none;添加到.out和pointer-events: auto;添加到.in来修复此问题。 HTH！