css禁用元素指针事件,鼠标穿透,点击下层元素,用`pointer-events:none；`

pointer-events: none; 是CSS中的一个属性，它可以用来禁用元素上的鼠标事件，如点击、鼠标穿透等。这个属性可以应用于任何HTML元素，包括<div>、<span>、<a>等。

这是一个简单的例子，演示如何使用 pointer-events: none; 来禁用一个元素上的鼠标事件：

HTML:

<div class="parent">
  <div class="child">我是子元素</div>
  <div class="other">我是下层的其他元素</div>
</div>

CSS:

.parent {
  position: relative;
}
 
.child {
  pointer-events: none;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: red;
  padding: 10px;
}
 
.other {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: blue;
  padding: 10px;
}

在这个例子中，.child 元素具有 pointer-events: none; 属性，因此当你尝试点击或者鼠标穿透它时，实际上点击的是它下面的 .other 元素。这是一个很好的方法，可以用来创建一种遮罩层效果，而不需要使用JavaScript来处理点击事件。