` 会默认拦截所有鼠标事件（如 `mousemove`、`click` 等），导致你无法直接与底层的 `` 单元格进行交互，尽管它们在视觉上完全可见。 你或许会想：有没有办法让鼠标“穿透”遮罩层，直接触发下方的元素？当然有。解决方案极为简单，只需一行 CSS 声明——`pointer-events: none`。 当一个带有 `position: absolute` 和半透明背景（例如 `background: rgba(0,0,0,0.2)`）的 `

` 叠加在 HTML 表格上方时，它会自然充当事件“拦截器”。无论你是想监听 `mousemove` 来高亮单元格，还是点击某个位置触发操作，事件目标始终是那个遮罩 `

`，而非你希望操作的 ``。 解决这一问题的核心技巧，就是为这个遮罩 `

` 添加 `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` 将准确指向 `` 或其他底层元素，无需额外计算坐标或遍历 DOM。

• `pointer-events: none` 只影响鼠标事件，不会干扰 focus、键盘事件或 CSS 伪类（如 `:hover`）的样式继承（除非目标元素自身另有规则）；
• 如果需要在特定条件下恢复遮罩的交互能力（例如点击遮罩触发某个操作），可以借助 JavaScript 动态切换该属性：

  overlayDiv.style.pointerEvents = 'auto'; // 恢复捕获
  overlayDiv.style.pointerEvents = 'none';  // 再次透传

• 该属性兼容所有现代浏览器（Chrome 4+、Firefox 3.6+、Safari 5.1+、Edge 12+），连 IE11 也支持，可以放心使用。