如何让另一个下面的 div 接收悬停事件？

Question

这是演示该问题的示例代码

.under {
   position: absolute;
   top: 10px;
   left: 10px;
   border: 2px solid blue;
   width: 150px;
   height: 150px;
}

.under:hover {
   border: 10px solid green;

}

.over {
   position: absolute;
   z-index: 10;
   top: 10px;
   left: 10px;
   width: 150px;
   height: 150px;
   border: 1px solid black;
}

<div>
  <div class="under">
      Hello!
  </div>

  <div class="over" data-comment="I am invisible">
  </div>
</div>

当鼠标悬停在 over div 上时，我希望 under div 知道悬停事件，在这种情况下，更改相应的边框。

然而 over div 显然拦截了悬停事件。能否有一个纯粹的 css 解决方案将悬停事件传递给 under div？

Answer 1

救援指针事件！只需将 pointer-events: none; 设置为 .over.

.under {
   position: absolute;
   top: 10px;
   left: 10px;
   border: 2px solid blue;
   width: 150px;
   height: 150px;
}

.under:hover {
   border: 10px solid green;

}

.over {
   position: absolute;
   z-index: 10;
   top: 10px;
   left: 10px;
   width: 150px;
   height: 150px;
   border: 1px solid black;
pointer-events: none;
}

<div>
  <div class="under">
      Hello!
  </div>

  <div class="over" data-comment="I am invisible">
  </div>
</div>

注意，这将使 .over div 忽略所有指针事件，因此 javascript 单击处理程序将不起作用

Answer 2

我会调整 HTML 结构并检测 .over

上的悬停

.under {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 2px solid blue;
  width: 150px;
  height: 150px;
}

.over:hover + .under {
  border: 10px solid green;
}

.over {
  position: absolute;
  z-index: 10;
  top: 10px;
  left: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

<div>
  <div class="over" data-comment="I am invisible"></div>
  <div class="under">Hello!</div>
</div>

Answer 3

替换 div 的顺序并在悬停时将 over 设置为 ~ 以定位下一个同级

.under {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 2px solid blue;
  width: 150px;
  height: 150px;
}

.under:hover {
  border: 10px solid green;
}

.over {
  position: absolute;
  z-index: 10;
  top: 10px;
  left: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

.over:hover~div {
  border: 10px solid green;
}

<div>
  <div class="over" data-comment="I am invisible">
  </div>
  <div class="under">
    Hello!
  </div>


</div>

如何让另一个下面的 div 接收悬停事件？

How to make a div under another one receive a hover event?

html

css

z-index