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中忽略了您的样式颜色。

通过这种方式，您需要将!important添加到CSS中以确保它覆盖任何其他样式。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

E.g

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃34;定影＆＃34;它有！重要的是糟糕的练习。

您应该使用修改器来应用突出显示，因此可以使用.classList.add / remove / toggle（＆＃34; active＆＃34;）轻松切换它，并且它不会干扰：hover状态。

像

这样的东西

＆＃13;

/*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');
  };
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

IE11，按钮在背景颜色更改后不再有悬停效果

2 个答案: