用JS添加某些CSS屬性導(dǎo)致:hover失效

inapt 發(fā)布于2019-08-29 15:07 / 3226人閱讀

摘要：不用添加屬性，能正常設(shè)置背景顏色。左邊的圖是默認(rèn)情況下，右邊是鼠標(biāo)放上去的時(shí)候，現(xiàn)在還是能正常顯示的?？梢钥吹阶煮w顏色還是會(huì)改變的。原因是應(yīng)為添加樣式是直接在標(biāo)簽的上添加的，而的優(yōu)先級(jí)高于偽類?，F(xiàn)在終于達(dá)到了想要的結(jié)果

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

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

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

左邊的圖是默認(rèn)情況下，右邊是鼠標(biāo)放上去的時(shí)候，現(xiàn)在hover還是能正常顯示的。
（下面的圖都是左邊默認(rèn)，右邊hover）
但是如果通過js插入css樣式的話，鼠標(biāo)放上去的hover樣式就不會(huì)生效了。

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;
}

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

可以看到字體顏色還是會(huì)改變的。
原因是應(yīng)為js添加css樣式是直接在html標(biāo)簽的style上添加的，而style的優(yōu)先級(jí)高于css偽類。

從上到下style,hover,id選擇器。
可以在瀏覽器調(diào)試工具里看到，js是直接添加到style里的。

那么該怎么辦呢

不了解css優(yōu)先級(jí)的朋友可以先看一下博客園大牛寫的一篇css優(yōu)先級(jí)的文章css知多少（6）——選擇器的優(yōu)先級(jí)。
里邊講了選擇器的優(yōu)先級(jí)。但是并沒有講到css偽類和style的優(yōu)先級(jí)。
但是:hover偽類也失效了。說明style>css偽類>id>class。
給:hover的屬性后面添加!important就可以了。應(yīng)為!important優(yōu)先級(jí)高于一切?。?br>!important>style>css偽類>id>class。

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

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

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

云服務(wù)器 GPU云服務(wù)器用js添加css 導(dǎo)致定時(shí)器失效 js調(diào)用css屬性屬性導(dǎo)致

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113117.html

相關(guān)文章

玩轉(zhuǎn)CSS選擇器（二）之瀏覽器支持，常見Bug，性能優(yōu)化

摘要：本節(jié)內(nèi)容會(huì)跟著上一節(jié)的內(nèi)容繼續(xù)完善，首先會(huì)補(bǔ)充選擇器的瀏覽器支持情況主要是說，比如我們最常用的群組選擇器在時(shí)才被支持，并且還支持了很多我們沒有想到的選擇器，如子元素選擇器，屬性選擇器，了解后你會(huì)發(fā)現(xiàn)還是挺了不起的。前言上一篇系列文章整理了CSS選擇器的基礎(chǔ)使用方法，因?yàn)閮?nèi)容較多且細(xì)致，寫了很多DEMO，目前將它整理成適合移動(dòng)端瀏覽器的CSS選擇器的參考手冊(cè)，方便學(xué)習(xí)CSS的人參考使...

y1chuan 2019-08-28 18:16 評(píng)論0 收藏0
移動(dòng)端滾動(dòng)研究

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

ghnor 2019-08-23 14:32 評(píng)論0 收藏0
第六天移動(dòng)端Web開發(fā)注意事項(xiàng)

摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)Web開發(fā)需要注意...

妤鋒シ 2019-08-30 13:09 評(píng)論0 收藏0
第六天移動(dòng)端Web開發(fā)注意事項(xiàng)

摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)Web開發(fā)需要注意...

xbynet 2019-08-01 15:58 評(píng)論0 收藏0
CSS遮罩層：hover狀態(tài)丟失及解決方案

摘要：在時(shí)，亦可進(jìn)一步改變?cè)撜谡謱拥纳屎屯该鞫?。遮罩層?shí)現(xiàn)及狀態(tài)丟失問題代碼代碼在時(shí)，如果快速點(diǎn)擊鼠標(biāo)，可能會(huì)丟失的效果。狀態(tài)丟失的簡(jiǎn)單解決方案基本思路是，點(diǎn)擊鼠標(biāo)時(shí)給添加，強(qiáng)制它顯示里的樣式。 CSS遮罩層，顧名思義就是在div上，再鋪一層半透明的div。在hover時(shí)，亦可進(jìn)一步改變?cè)撜谡謱拥纳屎屯该鞫?。我們可以通過css定位和背景色實(shí)現(xiàn)。 CSS遮罩層實(shí)現(xiàn)及hover狀態(tài)丟失問題 ...

vincent_xyb 2019-08-21 12:02 評(píng)論0 收藏0