切换按钮二次点击恢复初始样式后hover颜色失效如何修复

问题根因 #

该问题是CSS优先级规则导致的：通过JS的element.style设置的是行内样式，优先级远高于样式表中定义的:hover伪类选择器。
你第一次点击按钮时给元素添加了行内背景色，第二次点击虽然把行内背景值改回了初始蓝色#2c475c，但行内样式一直存在，会持续覆盖:hover中定义的橙色背景，所以hover效果不再生效。

修复方案 #

最佳实践是用类切换控制状态，完全避免行内样式的优先级冲突，修改后的代码如下：

1. 调整CSS

新增激活状态类，统一在样式表中控制不同状态的样式：

#mute1 {    
  padding: 25px 50px;
  background: #2c475c;
  color: #fff;
  border-radius:5px;
}

#mute1:hover {  
  background: orange;
}

/* 激活态样式，对应点击后的红色效果 */
#mute1.active {
  background: red;
}
/* 激活态下禁用hover效果，符合需求 */
#mute1.active:hover {
  background: red;
}

2. 调整JS逻辑

删除直接修改行内背景的代码，改为切换类名即可，同时保留你原有的someFunction赋值逻辑：

var someFunction = {};

function changeColor() {
  const button = document.getElementById('mute1');
  // 切换激活类
  button.classList.toggle('active');
  const isActive = button.classList.contains('active');
  // 保留原有业务逻辑赋值
  someFunction["one"] = isActive;
  someFunction["two"] = isActive;
  // 若你原有代码中的someFunction[this.function]为实际业务逻辑，可在此处补充对应赋值
}

3. 修正HTML写法（可选，修复原代码的引号异常）

<button id="mute1" onclick="changeColor()">CHANGE</button>

效果验证 #

• 初始状态无active类：默认背景蓝色，hover显示橙色，符合预期
• 首次点击添加active类：默认背景红色，hover仍为红色，符合预期
• 第二次点击移除active类：回到初始状态，hover效果自动恢复，符合需求

内容的提问来源于stack exchange，提问作者ric12g