悬停绝对定位遮罩时显示元素，同时保留下层元素事件

我想给一组元素添加悬停显示信息框的功能，但遇到了矛盾：

• 用绝对定位的遮罩层（.hover-box）捕获hover事件时，信息框能正常显示，但遮罩下方的按钮点击事件完全失效；
• 给遮罩层加pointer-events: none;后，按钮事件恢复，但hover时信息框不再显示。

补充：父元素可能比遮罩层小（比如设置了width: fit-content），有没有办法让遮罩层的hover触发和按钮的点击事件同时生效？

代码示例 #

CSS #

.parent {
  position: relative;
  width : fit-content; /* 父元素可能比遮罩层小 */
}

.hover-box {
  width: 100vw;
  height: 100%;
  background: red;
  opacity: 0.2;
  position: absolute;
  top: 0;
  /* 打开这行按钮可点击，但hover失效 */
  /* pointer-events: none;  */
}

.info {
  display: none;
}

.hover-box:hover+.info {
  display: inline;
}

HTML #

<div class="parent">
  <button>btn0</button>
  <button>btn1</button>
  <div class="hover-box"></div>
  <button class="info">info</button>
</div>

可以通过将hover事件绑定到父元素，同时保留遮罩层的pointer-events: none来实现需求，既让按钮正常响应点击，又能通过父元素的hover触发信息框显示。

修改后的代码 #

CSS #

.parent {
  position: relative;
  width: fit-content;
}

.hover-box {
  width: 100vw;
  height: 100%;
  background: red;
  opacity: 0.2;
  position: absolute;
  top: 0;
  pointer-events: none; /* 保留此属性，让鼠标事件穿透到按钮 */
}

.info {
  display: none;
}

/* 改为父元素hover时显示信息框 */
.parent:hover .info {
  display: inline;
}

HTML #

<div class="parent">
  <button>btn0</button>
  <button>btn1</button>
  <div class="hover-box"></div>
  <button class="info">info</button>
</div>

原理说明 #

• pointer-events: none让遮罩层不拦截任何鼠标事件，下方按钮自然能响应点击；
• 父元素的hover事件会覆盖其包含的所有区域（包括遮罩层延伸的100vw范围），因为遮罩层是基于父元素绝对定位的，鼠标悬停在遮罩层覆盖的任何区域时，父元素都会触发hover状态，从而显示信息框。

进阶精准控制（可选） #

如果需要更精确的hover触发范围，可使用:has()选择器（现代浏览器已支持），仅当鼠标悬停在遮罩层或按钮区域时显示信息框：

.parent:has(.hover-box:hover, button:hover) .info {
  display: inline;
}

此方式同样需要保留遮罩层的pointer-events: none，但能更精准地控制触发条件。

内容的提问来源于stack exchange，提问作者Askhento