js中hover無效怎麼解決

這其實是css的優先順序所導致的。

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

<div></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中文網其他相關文章！