触发toggle切换功能后按钮hover悬停颜色失效问题如何解决

问题原因 #

你通过JS直接修改元素的style属性设置了内联样式，内联样式的优先级远高于CSS中定义的ID选择器样式，所以:hover伪类设置的背景色被内联样式覆盖，无法正常生效。

注意：如果出于特殊场景必须直接修改内联样式，可以将hover样式改为background: aqua !important;强行提升优先级，但该写法会破坏样式优先级规则，不建议日常使用。

解决方案 #

不要直接操作内联样式，改为通过切换CSS类的方式控制按钮不同状态的样式，:hover伪类的优先级高于普通类选择器，悬停样式可以正常覆盖普通状态的样式。

调整后CSS代码 #

#toggle {    
  padding: 20px 45px;
  background: green;
  color: #fff;
  border-radius:5px;
  font-weight:600; 
}

#toggle:hover {  
  background: aqua;
}

/* 新增两个状态类 */
#toggle.status-pink {
  background: pink;
  color: #222;
}

#toggle.status-blue {
  background: #2c475c;
  color: #fff;
}

调整后JS代码 #

function toggleButton() {
  const button = document.getElementById('toggle');
  // 检查当前是否是粉色状态
  if (button.classList.contains('status-pink')) {
    button.classList.remove('status-pink');
    button.classList.add('status-blue');
  } else {
    // 非粉色状态（包含初始绿色、蓝色状态）都切为粉色
    button.classList.remove('status-blue');
    button.classList.add('status-pink');
  }
}

调整后HTML代码 #

<button id="toggle" onclick="toggleButton();">TOGGLE</button>

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