js添加css屬性導致:hover無效的解決辦法

這其實是css的優先級導致的。

首先來看下不用js添加css屬性，hover能正常設置背景顏色。

<div id="add"></div>

#add{
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}
#add:hover{
  background-color: #000;
}

左邊的圖是默認情況下，右邊是鼠標放上去的時候，現在hover還是能正常顯示的。

（下面的圖都是左邊默認，右邊hover，應為截圖工具不能把鼠標也截上來）

但是如果通過js插入css樣式的話，鼠標放上去的hover樣式就不會生效了。

var add = document.getElementById("add");
add.style.backgroundColor = "red";

現在hover里設置的#000屬性已經失效了。

但這並不是hover偽類失去的作用，如果設置不是js添加的樣式，就能看出hover並沒有失效，比如添加一下字體顏色試一下。

#add:hover{
  background-color: #000;
  color: yellow;
}

可以看到字體顏色還是會改變的。

原因是應為js添加css樣式是直接在html標簽的style上添加的，而style的優先級高於css偽類。

從上到下style,hover,id選擇器。

可以在瀏覽器調試工具里看到，js是直接添加到style里的。

那么該怎么辦呢

不了解css優先級的朋友可以先看一下博客園大牛寫的一篇css優先級的文章css知多少（6）——選擇器的優先級。

里邊講了選擇器的優先級。但是並沒有講到css偽類和style的優先級。

但是:hover偽類也失效了。說明style>css偽類>id>class。

給:hover的屬性后面添加!important就可以了。應為!important優先級高於一切！！

!important>style>css偽類>id>class。

#add:hover{
  background-color: #000 !important;
}

現在終於達到了想要的結果