带onclick内联JS的CSS中激活按钮hover效果失效问题排查

问题根源 #

你在.active类里用了!important声明背景色，这是核心问题。!important会无视CSS选择器的特异性规则，强制应用该样式——哪怕你写了#button3.active:hover这种高特异性的hover选择器，也会被带!important的.active背景色覆盖，导致hover效果完全不生效。

修复步骤 #

1. 移除!important：删掉.active里的!important，改用更高特异性的选择器来确保激活状态样式优先于默认按钮样式。
2. 调整激活状态选择器：把.active改成#button3.active, #button4.active，这样它的特异性（ID+类）会高于基础按钮的ID选择器，不需要!important也能正确覆盖默认背景色。

修改后的CSS代码如下：

#button3.active, #button4.active {
   background-color: #cc0000;  
}
#button3, #button4 {
  background-color: black;
  color: white;
  padding: 10px 20px;
  margin-right: 10px;
  margin-top: 20px;
  border: none;
  cursor: pointer;
}

#button3:hover, #button4:hover {
  background-color: green;
}

#button3.active:hover, #button4.active:hover {
  background-color: blue;  
}

额外说明 #

你的HTML代码不需要改动，保持原有的内联onclick逻辑即可。现在激活状态的按钮hover时会正确显示蓝色，未激活的按钮hover显示绿色，激活状态默认显示红色，完全符合预期。

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