如何使鼠标事件穿透绝对定位的遮罩层触发底层元素

通过设置 pointer-events: none，可使覆盖在表格之上的绝对定位 div 透明化鼠标交互，从而让 mousemove 等事件正常触发底层 <td> 元素。

通过设置 `pointer-events: none`，可使覆盖在表格之上的绝对定位 `div` 透明化鼠标交互，从而让 `mousemove` 等事件正常触发底层 `

当一个带有 position: absolute 和半透明背景（如 background: rgba(0,0,0,0.2)）的 div 叠加在 HTML 表格上方时，它会默认拦截所有鼠标事件（如 mousemove、click），导致无法直接获取其下方的 <td> 元素——即使视觉上单元格清晰可见。

解决方法非常简洁：只需为该遮罩 div 添加 CSS 属性 pointer-events: none，即可使其完全“忽略”鼠标交互，将事件透传至下层 DOM 元素：

.overlay-div {  position: absolute;  background: rgba(0, 0, 0, 0.2);  z-index: 1;  pointer-events: none; /* ✅ 关键声明：允许事件穿透 */}

✅ 效果说明：

• 遮罩 div 仍正常渲染（可见、可动画、不影响布局）；
• 所有鼠标事件（mousemove、mouseenter、click 等）将直接作用于其下方的表格单元格；
• JavaScript 中 event.target 将准确指向 <td> 或其他底层元素，无需额外计算坐标或遍历 DOM。

⚠️ 注意事项：

• pointer-events: none 仅影响鼠标事件，不影响 focus、键盘事件或 CSS 伪类（如 :hover）的样式继承（除非目标元素自身支持）；
• 若需在特定条件下恢复遮罩的交互能力（例如点击遮罩触发操作），可通过 JS 动态切换该属性：

  overlayDiv.style.pointerEvents = 'auto'; // 恢复捕获overlayDiv.style.pointerEvents = 'none';  // 再次透传

• 该属性兼容所有现代浏览器（Chrome 4+, Firefox 3.6+, Safari 5.1+, Edge 12+），IE11 也支持。

总结：pointer-events: none 是实现视觉遮罩与事件穿透的理想方案，语义清晰、性能高效，是 UI 层叠设计中不可或缺的 CSS 工具。