通过设置 pointer-events: none，可以让绝对定位的覆盖层（如带透明背景的 div）不拦截鼠标事件，使底层表格单元格等元素能正常响应 mousemove 等交互。
通过设置 `pointer-events: none`，可以让绝对定位的覆盖层（如带透明背景的 div）不拦截鼠标事件，使底层表格单元格等元素能正常响应 mousemove 等交互。
在 Web 开发中，当使用 position: absolute 的 div（例如用于高亮、遮罩或悬浮提示）叠加在表格（<table>）或其他可交互元素之上时，该覆盖层会默认捕获所有鼠标事件（如 mousemove、click），导致底层的 <td> 或 <tr> 无法被正确识别和响应——这正是你遇到的问题。
解决方法非常简洁：只需为该覆盖层 div 添加 CSS 样式 pointer-events: none;。该属性指示浏览器忽略该元素上的所有鼠标事件，使其“完全透明”于鼠标交互，事件将直接穿透至其下方的元素（如表格单元格）。
✅ 示例代码：
<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>
<table id="myTable">
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
<div class="overlay" style="top: 10px; left: 10px; width: 200px; height: 100px;"></div>
<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 是实现鼠标事件穿透最标准、高效且语义清晰的解决方案，应作为覆盖层交互设计的首选实践。
