如何使另一个下的 div 接收悬停事件？答案

【问题标题】：How to make a div under another one receive a hover event?如何使另一个下的 div 接收悬停事件？
【发布时间】：2018-10-17 16:39:25
【问题描述】：

这是一个演示问题的示例代码

.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？

【问题讨论】：

标签： html css z-index

【解决方案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 点击处理程序将不起作用

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：