CSS中元素将不再响应鼠标事件（如点击、悬停等）。pointer-events: none;

按钮点击无效

pointer-events: none; 是一种 CSS 样式规则，用于指定元素在用户与之交互时的行为。当应用了 pointer-events: none; 样式时，元素将不再响应鼠标事件（如点击、悬停等），即使用户点击该元素上的内容，也不会触发任何与该元素相关的事件。

主要作用：

1. 禁用用户交互：

   • 当将 pointer-events: none; 应用于一个元素时，该元素将变得不可交互，用户无法通过鼠标或触摸设备与其进行交互。
   • 这对于创建一种视觉效果，例如在某些情况下将一个元素“禁用”（不可点击）或者使其在其他元素之上不响应事件很有用。

2. 事件穿透：

   • 在某些情况下，当子元素的 pointer-events 设置为 none 时，鼠标事件将穿透到其下方的父元素或其他元素上，从而使得下方的元素能够接收到事件。
   • 这对于创建复杂的用户界面或者特定交互效果非常有用。

示例：

下面是一个简单的示例，演示了如何使用 pointer-events: none; 样式规则：

.disabled-element {
  pointer-events: none;
  opacity: 0.5; /* 可选：降低不可交互元素的透明度 */
}

在这个示例中，disabled-element 类被应用于一个元素，这个元素将不再响应鼠标事件，同时降低了其透明度，使其看起来被“禁用”了。这种样式可以用于在界面中标记某些元素为不可交互状态，提供视觉上的反馈。