通过设置 pointer-events: none，可以让绝对定位的遮罩层不拦截鼠标事件，使底层表格单元格等元素正常响应 mousemove 等交互事件。

通过设置 `pointer-events: none`，可以让绝对定位的遮罩层不拦截鼠标事件，使底层表格单元格等元素正常响应 `mousemove` 等交互事件。

在 Web 开发中，常需在表格上方叠加一个半透明、绝对定位的 div（例如用于高亮、遮罩或拖拽辅助），但默认情况下该 div 会捕获所有鼠标事件（如 mousemove、click），导致其下方的表格单元格无法被正确识别。

解决方法非常简洁：只需为该覆盖层 div 设置 CSS 属性 pointer-events: none。该属性会使元素完全不参与鼠标事件的捕获与分发，事件将直接穿透到其下方的 DOM 元素（如

单元格），从而恢复 mousemove 的正常行为。

✅ 示例代码：

Exa AI

Exa AI是一款AI图像与设计工具，专门为AI模型设计的搜索引擎平台。

下载

Cell 1	Cell 2
Cell 3	Cell 4

document.getElementById('myTable').addEventListener('mousemove', (e) => {
  const cell = e.target.closest('td');
  if (cell) {
    console.log('Hovering over:', cell.textContent);
  }
});

⚠️ 注意事项：

• pointer-events: none 仅影响鼠标事件（click、mousemove、mouseenter 等），不影响 focus、scroll 或键盘事件；
• 若需在某些条件下恢复事件拦截（如点击时激活遮罩），可动态切换该样式：overlay.style.pointerEvents = 'auto' / 'none'；
• 该属性在所有现代浏览器中均被良好支持（包括 IE11+），无需额外兼容处理；
• 不要与 visibility: hidden 或 opacity: 0 混淆——二者仍会拦截事件，而 pointer-events: none 是真正的“事件透明”。

总之，pointer-events: none 是实现视觉覆盖与交互穿透的理想方案，简洁、高效且语义清晰。