CSS：pointer-events 属性来实现“鼠标穿透”的效果

在多图层开发过程中，经常需要一个元素（如图层A）完全覆盖在另一个元素（图层B）之上。通常情况下，鼠标的所有事件（点击、悬停、移动等）都会被顶层的图层A捕获，而图层B则无法接收到任何事件。通过“鼠标穿透”，我们可以让鼠标事件“穿过”图层A，直接被下方的图层B捕获，就像图层A不存在一样。通过pointer-events 属性来实现“鼠标穿透”的效果。

   实现核心：pointer-events 属性

    CSS 的 pointer-events 属性正是实现这一效果的关键。它控制着一个元素如何响应鼠标（或触摸）事件。

   关键属性值：

    auto：默认值。元素的行为与往常一样，会正常响应鼠标事件并成为事件目标。

    none：实现穿透的关键。元素永远不会成为鼠标事件的目标。鼠标事件会“穿透”该元素，直接作用于其下层的元素。

语法：

.overlay {
  pointer-events: none;
  }

通过pointer-events 属性来实现“鼠标穿透”的，能够在多图层开发中，不影响主页面的使用！