用JS添加某些CSS屬性導致:hover失效

inapt 發布于2019-08-29 15:07 / 3203人閱讀

摘要：不用添加屬性，能正常設置背景顏色。左邊的圖是默認情況下，右邊是鼠標放上去的時候，現在還是能正常顯示的。可以看到字體顏色還是會改變的。原因是應為添加樣式是直接在標簽的上添加的，而的優先級高于偽類。現在終于達到了想要的結果

不用js添加css屬性，hover能正常設置背景顏色。

#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優先級的朋友可以先看一下博客園大牛寫的一篇css優先級的文章css知多少（6）——選擇器的優先級。
里邊講了選擇器的優先級。但是并沒有講到css偽類和style的優先級。
但是:hover偽類也失效了。說明style>css偽類>id>class。
給:hover的屬性后面添加!important就可以了。應為!important優先級高于一切！！
!important>style>css偽類>id>class。

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

--------------------

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

GPU云服務器云服務器用js添加css 導致定時器失效 js調用css屬性屬性導致

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113117.html

玩轉CSS選擇器（二）之瀏覽器支持，常見Bug，性能優化

摘要：本節內容會跟著上一節的內容繼續完善，首先會補充選擇器的瀏覽器支持情況主要是說，比如我們最常用的群組選擇器在時才被支持，并且還支持了很多我們沒有想到的選擇器，如子元素選擇器，屬性選擇器，了解后你會發現還是挺了不起的。前言上一篇系列文章整理了CSS選擇器的基礎使用方法，因為內容較多且細致，寫了很多DEMO，目前將它整理成適合移動端瀏覽器的CSS選擇器的參考手冊，方便學習CSS的人參考使...

y1chuan 2019-08-28 18:16 評論0 收藏0
移動端滾動研究

摘要：還會有一個性能上的問題就是當頁面的列表過長，元素過多時，在模擬滾動，下拉刷新這段時間內，頁面也會有卡頓現象，這里采取了一個優化策略即列表較長時數量較多時，在觸發下拉刷新的時機時將頁面視窗之外的元素隱藏或者存放在里面。移動web滾動問題在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內觸發，將該div設置成overflow:scroll/auto;來形成div內部的...

ghnor 2019-08-23 14:32 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

妤鋒シ 2019-08-30 13:09 評論0 收藏0
第六天移動端Web開發注意事項

摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...

xbynet 2019-08-01 15:58 評論0 收藏0
CSS遮罩層：hover狀態丟失及解決方案

摘要：在時，亦可進一步改變該遮罩層的色彩和透明度。遮罩層實現及狀態丟失問題代碼代碼在時，如果快速點擊鼠標，可能會丟失的效果。狀態丟失的簡單解決方案基本思路是，點擊鼠標時給添加，強制它顯示里的樣式。 CSS遮罩層，顧名思義就是在div上，再鋪一層半透明的div。在hover時，亦可進一步改變該遮罩層的色彩和透明度。我們可以通過css定位和背景色實現。 CSS遮罩層實現及hover狀態丟失問題 ...

vincent_xyb 2019-08-21 12:02 評論0 收藏0