CSS如何禁用:hover伪类

在CSS中，你不能直接禁用:hover伪类，但你可以通过覆盖:hover伪类的样式来使其不生效。如果你想要在特定的情况下停用:hover效果，你可以使用JavaScript来动态添加或移除一个类，这个类会覆盖:hover样式。

例如，你有以下CSS：




.button:hover {
  background-color: blue;
}

你可以添加一个类来覆盖:hover效果：




.button.no-hover:hover {
  background-color: inherit;
}

然后使用JavaScript来控制这个类：




// 禁用hover效果
document.querySelector('.button').classList.add('no-hover');
 
// 启用hover效果
document.querySelector('.button').classList.remove('no-hover');

这样，通过切换no-hover类，你可以动态地启用或禁用:hover伪类的效果。

CSS如何禁用:hover伪类

评论已关闭

推荐阅读