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

这是因为从 javascript 应用的内联样式（这已经是一种不好的做法）接管了。

用 !important“修复”它是一种糟糕的做法。

您应该使用修饰符来应用突出显示，因此可以轻松地使用 .classList.add/remove/toggle("active") 进行切换，并且根本不会干扰 :hover 状态。

有点像

/*selects all buttons inside .buttons div*/
var el = document.querySelectorAll('.buttons button');
for (let i = 0; i < el.length; i++) {
/*adds on click event to each of them*/
  el[i].onclick = function() {
    var c = 0;
    while (c < el.length) {
    /*removes the active class from all*/
      el[c++].classList.remove ('active');
    }
    /*ads the class to the one clicked*/
    el[i].classList.add('active');
  };
}

.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;
    }
    
    .active{
      background:red;
    }

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

Answer 2

因为内联样式是 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>