首先來看下不用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偽類和style的優先權。
但是:hover偽類別也失效了。說明style>css偽類>id>class。
給:hover的屬性後面加上!important就可以了。應為!important優先級高於一切！ ！
!important>style>css偽類>id>class。
#add:hover{
background-color: #000 !important;
}
現在終於達到想要的結果了。
以上是js中hover無效怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！
