如何让同一屏幕位置的多个HTML元素原生响应鼠标事件？

多个位置、尺寸完全一致的同级交互式元素，期望全部原生响应指针事件（如CSS :hover 状态），但目前仅最上层元素能触发响应，下层元素被遮挡。尝试过CSS pointer-events 属性的各类取值，均无法解决该问题。是否可以不添加额外鼠标事件监听层、不通过JS调用 elementsFromPoint 触发响应，让所有元素都响应指针事件？

结论：没有纯CSS/原生浏览器机制的方法能实现这一需求。

浏览器的指针事件命中系统核心逻辑是：仅将事件派发给视觉堆叠层级最顶端的元素，这是浏览器渲染与事件模型的基础规则。pointer-events 属性仅能控制单个元素是否参与事件命中流程，无法打破“仅最上层元素接收事件”的限制——哪怕给下层元素设置 pointer-events: auto，只要上层元素同样参与事件命中，下层元素依然会被遮挡，无法接收到指针事件。

如果你的需求仅局限于CSS样式触发（比如所有重叠元素在鼠标悬停时都显示:hover样式），可以通过父容器代理的方式变通实现：

• 将所有重叠元素放入同一个父容器
• 给父容器设置 pointer-events: auto，子元素保持原有样式
• 通过父容器的 :hover 状态批量触发所有子元素的样式变化

示例代码：

<div class="container">
  <div class="overlap-item item1"></div>
  <div class="overlap-item item2"></div>
  <div class="overlap-item item3"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}
.overlap-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 原有基础样式 */
  border: 1px solid #ccc;
}
/* 通过父容器hover触发所有子元素的hover样式 */
.container:hover .overlap-item {
  background: #f0f0f0;
  border-color: #666;
}

但这种方式只是模拟触发样式，并非让每个子元素真正原生响应自身的:hover事件。如果需要每个元素独立响应指针事件（比如各自绑定的JS事件回调），则必须借助JS实现：要么通过elementsFromPoint获取所有重叠元素并手动触发事件，要么通过顶层代理层分发事件——没有原生机制能绕过这一步。

内容的提问来源于stack exchange，提问作者Igor K.