Javascript IE11，背景颜色改变后，按钮不再具有悬停效果

我有一些代表“工具”的按钮。按钮的样式如下所示：

.button {
    background-color: #DDDDDD;
    border: none;
    color: black;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    padding: 8px 16px;
    cursor: pointer;
}

.button:hover {
    background-color: #4CAF50;
    color: white;
}

当您单击其中一个工具时，我会更改背景颜色以突出显示您正在使用的工具，并重置未使用的工具的背景，例如：

document.getElementById("buttonPencil").style.backgroundColor = "red";
document.getElementById("buttonEraser").style.backgroundColor = "#DDDDDD";
document.getElementById("buttonBucket").style.backgroundColor = "#DDDDDD";

问题是，在这种样式更改之后，这些按钮上的悬停效果不再正常工作（事实上，只有按钮内的文本颜色在悬停时更改）。

---

有人能告诉我如何解决这个问题以及为什么会发生这种情况吗？

因为内联样式在css中是最重要的。您的样式颜色在CSS中被忽略

这样，您需要添加

！重要信息

，以确保CSS覆盖任何其他样式

document.getElementById（“buttonPencil”）.style.backgroundColor=“red”；
document.getElementById（“按钮生成器”）.style.backgroundColor=“#DDDDDD”；
document.getElementById（“buttonBucket”）.style.backgroundColor=“#DDDDDD”
。按钮{
背景色：#DDDDDD；
边界：无；
颜色：黑色；
边界半径：8px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：12px；
填充：8px 16px；
光标：指针；
}
.按钮：悬停{
背景色：#4CAF50！重要；
颜色：白色；
}
铅笔
橡皮擦
Bucket
这是因为javascript应用的内联样式（这已经是一种糟糕的做法）占据了主导地位

“修理”它！重要的是一个非常糟糕的练习

您应该使用一个修改器来应用高亮显示，这样就可以轻松地使用.classList.add/remove/toggle（“active”）来切换高亮显示，并且它根本不会干扰：hover状态

差不多


/*选择内部的所有按钮。按钮div*/
var el=document.queryselectoral（'.buttons'）；
for（设i=0；i

。按钮{
背景色：#DDDDDD；
边界：无；
颜色：黑色；
边界半径：8px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：12px；
填充：8px 16px；
光标：指针；
}
.按钮：悬停{
背景色：#4CAF50；
颜色：白色；
}
.主动{
背景：红色；
}

铅笔
橡皮擦
水桶
内联样式在CSP中具有最高的特异性。如果有帮助，请投票支持或标记为答案。。还有，很高兴听到我在努力，但它告诉我要等待。。。有一个5分钟的冻结。或者更好的是，使用类，不要使用重要的！如果用户按下铅笔工具，铅笔工具将具有红色背景，而其他工具将具有默认背景。然后，如果他选择橡皮擦工具，橡皮擦工具将有红色背景，其他工具将有默认背景，依此类推。。。我猜上面的CSS只会为铅笔设置红色背景，就是这样。你需要使用CSS在点击时添加类，在点击其他类时删除类。这几乎就像切换按钮，这似乎是一个有趣的解决方案。谢谢。显然classList.remove和classList.add在IE11上不起作用。IE11是我唯一需要使用此工具的浏览器。似乎有很多代码需要添加，以实现简单的颜色更改。。。为什么要使用！重要的是这么糟糕？考虑到我正在构建的工具只使用运行相同操作系统和IE版本的60台PC。它不会“在线”。