如何通过点击禁用CSS Hover效果并再次启用？

安全阿岳

2026-8-3

点击按钮时禁用CSS hover效果，再次悬停恢复的实现方案

核心思路是通过自定义CSS类来覆盖:hover伪类的样式（无法直接禁用:hover伪类），具体实现步骤如下：

1. 调整CSS样式

新增一个no-hover类，当按钮拥有这个类时，取消hover状态下的缩放效果：

#header nav img:hover {
  transform: scale(1.2);
}

/* 新增：禁用hover效果的类 */
#header nav img.no-hover:hover {
  transform: none;
}

#log.active{
  display: flex !important;
  animation: fadein .3s !important;
}

2. 修改JavaScript逻辑

先补上你代码中缺失的按钮元素获取语句，再在点击事件中给按钮添加no-hover类，鼠标悬停事件中移除这个类：

// 补上获取按钮元素的代码（原代码遗漏了这行）
let odium = document.getElementById("symbol1");
let logStyle = document.getElementById("log").style;
let levelStyle = document.getElementById("level").style;
let log = document.getElementById("log");
let level = document.getElementById("level");

odium.addEventListener("mouseover", function (event) {
  // 鼠标悬停时移除禁用类，恢复hover效果
  odium.classList.remove('no-hover');
  logStyle.display = "block";
  logStyle.animation = "fadein .3s";
  levelStyle.display = "block";
  levelStyle.animation = "fadein .3s";
}, false);

odium.addEventListener("mouseout", function (event) {
    logStyle.display = "none";
    levelStyle.display = "none";
}, false); 

odium.addEventListener("click", function (event) {
  log.classList.toggle('active');
  level.classList.toggle('active');
  // 点击时添加禁用类，关闭hover效果
  odium.classList.add('no-hover');
}, false);