通过设置 pointer-events: none，可以让绝对定位的覆盖层（如带透明背景的 div）不拦截鼠标事件，使底层表格单元格等元素能正常响应 mousemove 等交互。

通过设置 `pointer-events: none`，可以让绝对定位的覆盖层（如带透明背景的 div）不拦截鼠标事件，使底层表格单元格等元素能正常响应 mousemove 等交互。

在 Web 开发中，当使用 position: absolute 的 div（例如用于高亮、遮罩或悬浮提示）叠加在表格（

）或其他可交互元素之上时，该覆盖层会默认捕获所有鼠标事件（如 mousemove、click），导致底层的 无法被正确识别和响应——这正是你遇到的问题。

解决方法非常简洁：只需为该覆盖层 div 添加 CSS 样式 pointer-events: none;。该属性指示浏览器忽略该元素上的所有鼠标事件，使其“完全透明”于鼠标交互，事件将直接穿透至其下方的元素（如表格单元格）。

✅ 示例代码：

稿定AI

一款融合AI图像生成与智能编辑能力的在线设计工具，可辅助完成图片重绘、线稿处理和人物视觉优化等创作任务。

下载

<style>
  .overlay {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.2);
    z-index: 1;
    pointer-events: none; /* 关键：允许事件穿透 */
  }
  table td {
    padding: 12px;
    border: 1px solid #ccc;
  }
</style>

或

Cell 1	Cell 2
Cell 3	Cell 4

<script> document.getElementById('myTable').addEventListener('mousemove', (e) => { if (e.target.tagName === 'TD') { console.log('Hovering over:', e.target.textContent.trim()); } }); </script>

⚠️ 注意事项：

• pointer-events: none 仅影响鼠标事件（mousemove、click、mouseenter 等），不影响 DOM 结构、渲染或键盘焦点；
• 若需在某些条件下恢复事件捕获（如点击 overlay 触发操作），可通过 JS 动态切换该样式（如 element.style.pointerEvents = 'auto'）；
• 不支持 IE10 及更早版本（IE11+ 支持良好），如需兼容旧版 IE，需改用 document.elementFromPoint() 手动查找底层元素（但复杂度显著上升）；
• 该方案同样适用于其他重叠场景，如 Canvas 上层提示框、SVG 覆盖层、模态弹窗中的非交互区域等。

总结：pointer-events: none 是实现鼠标事件穿透最标准、高效且语义清晰的解决方案，应作为覆盖层交互设计的首选实践。