javascript - IE11，按钮改变背景色后不再有悬停效果

Question

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

.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";

问题是，在更改此样式后，这些按钮上的悬停效果不再正常工作(实际上只有按钮内的文本颜色在悬停时发生变化)。有人可以向我解释如何解决这个问题以及为什么会这样吗？

Answer 1

因为内联样式是 css 中的最高优先级。 CSS 忽略了您的样式颜色。

因此，您需要向 CSS 添加 !important 以确保它覆盖任何其他样式。

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

.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 !important;
    color: white;
}

<button id="buttonPencil" class="button">Pencil</button>
<button id="buttonEraser" class="button">Eraser</button>
<button id="buttonBucket" class="button">Bucket</button>

顺便说一下，为什么你需要从 JS 而不是 CSS 更改颜色。通过更改 CSS，您将不需要添加 !important

例如

.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;
}

.buttonPencil { background-color: red; }
.buttonEraser, .buttonBucket { background-color: #DDDDDD; }

<button class="button buttonPencil">Pencil</button>
<button class="button buttonEraser">Eraser</button>
<button class="button buttonBucket">Bucket</button>