在按鈕單擊塊上調用JS函數CSS：懸停

Question

我在所有按鈕上實現了CSS懸停方法。 看起來像這樣：

.button:hover { background-color: #36a39c; }

在我單擊其中一個按鈕之前，此方法可以正常工作。 單擊按鈕后，將使用以下代碼調用JS函數：

   <div id= "one"><button class="button" id = "b1" value="0" onclick="checker(this.id)"></button></div>

這是JS腳本：

var checker = function(id)
{
   var xyz = id; 
   var value = document.getElementById(xyz).value

   if (answerjson[value].is_right_choice==1)
   {
      for (var i = 1; i <=4; i++) {
          document.getElementById("b"+i).style.background='#722F37';
      }
      document.getElementById(xyz).style.background='green';
      setTimeout(function(){ alert("Correct!"); }, 100);
   }
   else {
        for (var i = 1; i <=4; i++) {
          document.getElementById("b"+i).style.background='#722F37';

        }
        document.getElementById(xyz).style.background='red';
        setTimeout(function(){ alert("Sorry, Try Again"); }, 100);

   }

}

調用該腳本后，懸停時我的按鈕不再更改顏色。 有什么想法嗎？

Answer 1

您正在JS代碼中設置inline style=""屬性。

內聯樣式設置的屬性始終會覆蓋CSS選擇器（ !important除外），因此CSS不再執行任何操作。

您應該添加CSS類，而不是設置內聯樣式。

Answer 2

發生這種情況的原因是，當您使用javascript添加背景色時，它會作為內聯樣式添加，並且會覆蓋css類選擇器，因為內聯樣式始終需要更多的首選項。 您需要使用該顏色制作一個類，然后使用javascript添加/刪除該顏色。 例如上課

.green{
   background-color: green;
}

然后使用javascript將其添加如下：

document.getElementById(xyz).className += " green";