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

通过设置 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 工具。