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收到悬停事件？

3 个答案: