js中hover無效怎么解決

這其實是css的優(yōu)先級導(dǎo)致的。

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

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

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

左邊的圖是默認情況下，右邊是鼠標(biāo)放上去的時候，現(xiàn)在hover還是能正常顯示的。

（下面的圖都是左邊默認，右邊hover，應(yīng)為截圖工具不能把鼠標(biāo)也截上來）

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

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

現(xiàn)在hover里設(shè)置的#000屬性已經(jīng)失效了。

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

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

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

原因是應(yīng)為js添加css樣式是直接在html標(biāo)簽的style上添加的，而style的優(yōu)先級高于css偽類。

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

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

那么該怎么辦呢

里邊講了選擇器的優(yōu)先級。但是并沒有講到css偽類和style的優(yōu)先級。

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

給:hover的屬性后面添加!important就可以了。應(yīng)為!important優(yōu)先級高于一切??！

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

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

現(xiàn)在終于達到了想要的結(jié)果。

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