js中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偽類和style的優先級。

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

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

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

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

現在終于達到了想要的結果。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com