的Javascript的backgroundColor的確取消了CSS懸停？

我div有類：的Javascript的backgroundColor的確取消了CSS懸停？

.cls { background-color: #ff0000; } 
.cls:hover { background-color: #0000ff; }

當javascript我做的：

mydiv.style.backgroundColor = "#555555";

它的工作原理，但懸停不工作了！

我還沒有發現有關在網絡上這種行爲多的信息，是正常的嗎？

如何解決可能是一個問題，但如果你想告訴...

來源

2016-11-22 Jackt

可以youm添加HTML代碼？ –

這很正常 - 請參閱[本文檔]（https://developer.mozilla.org/en/docs/Web/CSS/Specificity）瞭解爲什麼 –

一個簡單的解決辦法是在懸停背景顏色上設置「！important」標誌 –

當你給的javascript 背景色所以它是作爲內聯樣式應用，如果你想給懸停效果然後應用！重要它。

.cls { background-color: #ff0000; } 
.cls:hover { background-color: #0000ff !important; }

來源

2016-11-22 05:38:07

我認爲它會的工作，給予類的CLS2「在JavaScript mydiv和

.cls:not(.cls2) { background-color: #ff0000; } 
.cls2 { background-color:#555555; } 
.cls:hover { background-color: #0000ff; }

來源

2016-11-22 05:39:08 Luan

也許添加OnMouseEnter在，OnMouseLeave在事件監聽器來實現懸停。

來源

2016-11-22 05:44:18 chery

非常有趣的，雖然它是怪異的行爲。

var elem = document.getElementsByClassName("cls")[0]; 
 
elem.style.backgroundColor = "yellow"; // It'll become inline property

.cls { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
} 
 

 
.cls:hover { background-color: #0000ff; }

<div class="cls"></div>

當我們從Javascript應用background-color，它會成爲內聯財產，並採取高優先於其他性質，甚至壓倒一切的background-color從hover效果。

對於POC，看看這個

.cls { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ff0000; } 
 
.cls:hover { background-color: #0000ff; }

<div class="cls" style="background-color: yellow"></div>

現在，我在申請從inlinebackground-color在這裏也，它是通過css風格以高優先級。

解決這個原因，加上！重要上hover

var elem = document.getElementsByClassName("cls")[0]; 
 
elem.style.backgroundColor = "yellow";

.cls { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
} 
 

 
.cls:hover { background-color: #0000ff !important; }

<div class="cls"></div>

UPDATE

正如@Mr_Green說，!important屬性不是最好的做法，相反，我們可以增加一個班也將解決您的proble米

var elem = document.getElementsByClassName("cls")[0]; 
 
elem.classList.add('secondary');

.cls { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ff0000; 
 
} 
 

 
.secondary { 
 
    background-color: #000000; 
 
} 
 

 
.secondary:hover { 
 
    background-color: #0000ff; 
 
}

<div class="cls"></div>

希望這有助於:)

來源

2016-11-22 06:01:57

是的，這對我來說很奇怪，因爲我一直認爲僞類風格會先於內聯風格。解決方法不是用'！important'去僞類樣式，而是動態添加一個單獨的類來保存樣式。 –

@Mr_Green我將更新我的答案 –

在ie6中添加類作品？ – Jackt

使用JavaScript將覆蓋元素的樣式改變背景顏色。

，如果你真的想添加使用可以參考這篇文章的javascript懸停效果：Change :hover CSS properties with JavaScript

我建議你使用jQuery爲這些類型的代碼。

來源

2016-11-22 06:21:41 Morteza

檢查片段。其工作

var myDiv = document.querySelectorAll('.cls')[0]; 
 
myDiv.style.background='green'

.cls{ background-color: #ff0000; height:100px; width:100px; } 
 
.cls:hover { background-color: #0000ff !important; }


 

 
<div class="cls"> 
 
</div>

來源

2016-11-22 06:35:53

的Javascript的backgroundColor的確取消了CSS懸停？

回答

相關問題