时间戳

首页 > 解决方案 > 如何使另一个下的 div 接收悬停事件？

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

问题描述

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

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

当鼠标悬停在overdiv 上时，我想要underdiv 知道悬停事件，在这种情况下，相应地更改边框。

然而，overdiv 显然正在拦截悬停事件。可以有一个纯css解决方案将悬停事件传递给underdiv吗？

标签： htmlcssz-index

解决方案

指向救援的事件！只需设置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 点击处理程序将不起作用

推荐阅读