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

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

` 元素。

当一个带有 position: absolute 和半透明背景（如 background: rgba(0,0,0,0.2)）的 div 叠加在 HTML 表格上方时，它会默认拦截所有鼠标事件（如 mousemove、click），导致无法直接获取其下方的

元素——即使视觉上单元格清晰可见。

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

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

✅ 效果说明：

Auri AI

Auri AI是一款面向 Apple 设备的 AI 键盘、语音输入、聊天和智能笔记工具。

下载

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