用JS新增某些CSS屬性導致 hover失效

2021-09-13 19:46:15 字數 1015 閱讀 6103

不用js新增css屬性,hover能正常設定背景顏色。

#add

#add:hover

左邊的圖是預設情況下,右邊是滑鼠放上去的時候,現在hover還是能正常顯示的。

(下面的圖都是左邊預設,右邊hover)

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

var add = document.getelementbyid("add");

add.style.backgroundcolor = "red";

現在hover裡設定的#000屬性已經失效了。

但這並不是hover偽類失去的作用,如果設定不是js新增的樣式,就能看出hover並沒有失效,比如新增一下字型顏色試一下。

#add:hover
可以看到字型顏色還是會改變的。

原因是應為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
現在終於達到了想要的結果

H5新增標籤 css3新增屬性

一 新增標籤 1 css3新增屬性之border color 為邊框設定多種顏色 p這裡說一下題外話,需要注意 border width 屬性如果單獨使用的話是不會起作用的。請首先使用 border style 屬性來設定邊框。2 css3新增屬性之border image 邊框 css3的bord...

H5和CSS3新增屬性

這些新特性都有相容性問題 基本都是 ie9 版本 1以前布局我們都是用 div 做的 div 對於我們搜尋引擎來說是麼樣語義的 頭部標籤 導航標籤 內容標籤 定義文件某個區域 大號的div 側邊欄標籤 尾部標籤 1 這些語義化標準主要是針對搜素引擎的 2 這些標籤頁面中可以使用多次 3 在 ie9 ...

h5 css3相關新增屬性及標籤

1.多 標籤有兩個,分別是 音訊 audio 語法格式 多 標籤使用總結 多 標籤在不同瀏覽器下情況不同,存在相容性問題 button button disabled 選擇type search的輸入框 input type search 選擇類名以black開頭的 span class black...