如何在 CSS 中使悬停效果无

在 CSS 中，悬停效果是很常见的，但有时需要在特定的情况下移除这种效果。以下是一些方法：

1. 使用 pointer-events 属性

pointer-events 属性可以控制元素接受何种类型的事件。默认值是 auto，表示元素接受所有事件。

如果将 pointer-events 设置为 none，那么该元素将不会响应任何鼠标事件，包括悬停事件。

.no-hover {
  pointer-events: none;
}

2. 使用 pointer-events 属性和一个隐藏的伪元素

另一个使用 pointer-events 的方法是在元素上创建一个伪元素，并将其隐藏。这样，鼠标事件将被指向伪元素，而不是元素本身。

.no-hover {
  pointer-events: none;
}
.no-hover:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

3. 使用 JavaScript

JavaScript 可以检测鼠标事件，并根据需要停止事件传播。

<div class="no-hover" onmouseover="return false;">
  No hover effect
</div>

结论

以上是一些在 CSS 中移除悬停效果的方法。可以根据需要选择其中一个或多个方法。