Javascript backgroundColorはCSSホバーを削除しますか？

Question

私のdivは、クラスを持っています

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

javascriptと私が行うと：

mydiv.style.backgroundColor = "#555555"; 

それは動作しますが、ホバーはもう動作しません！

ネット上でこの動作に関する多くの情報が見つかりませんでしたが、それは正常ですか？

どのように修正する別の質問かもしれないが、あなたはそれをインラインスタイルとして、あなたがホバー効果を与えたい場合に適用されるようにあなたがJavaScriptから背景色を与えていると...

Answer 1

を伝えたい場合！importantを適用してください。

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

Answer 2

私はそれが Javascriptを にmydivするクラスのCLS2」を与え、

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

Answer 3

は多分ホバーを実装するために、onmouseleaveイベントリスナーをonmouseenter追加することを仕事になると思います。

Answer 4

奇妙な動作ですが、非常に興味深いです。

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のために

は、今、私はinlineからbackground-colorを適用することだし、ここにもそれがcssスタイルより高い優先順位を取っているこの

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

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

を見てください。この原因について

ソリューションは、を追加している！重要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を解決するm。

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>

希望はこのことができます:)

Answer 5

JavaScriptがその要素のスタイルを上書きします使用して背景色を変更します。

あなたは本当にあなたがこの記事を参照することができjavascriptの使用ホバー効果を追加したい場合：Change :hover CSS properties with JavaScript

私はあなたがコードのこれらのタイプのためのjQueryのを使用することをお勧めします。

Answer 6

スニペットを確認してください。そのHTMLコードを追加することができますyoum

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>