Javascript backgroundColor entfernt Css Hover?

Question

Meine div hat Klasse:

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

Wenn mit javascript ich tun:

mydiv.style.backgroundColor = "#555555"; 

Es funktioniert, aber der Hover funktioniert nicht mehr!

Ich habe nicht viele Informationen über dieses Verhalten im Netz gefunden, ist das normal?

Wie eine andere Frage beheben könnte sein, aber wenn Sie wollen ... sagen

Answer 1

Wie Sie Hintergrund-Farbe von Javascript geben, damit es als Inline-Stil angewendet wird, und wenn Sie möchten, Hover-Effekt geben, dann wenden Sie ! wichtig zu ihm an.

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

Answer 2

ich denke, es wird funktionieren, dass geben Klasse 'CLS2' in Javascript myDiv und

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

Answer 3

vielleicht hinzufügen OnMouseEnter, OnMouseLeave Ereignis-Listener den Hover zu implementieren.

Answer 4

Sehr interessant, obwohl es seltsames Verhalten ist.

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>

Wenn wir background-color von Javascript anwenden, wird es Inline-Eigenschaft wird und mit hohen Priorität gegenüber anderen Eigenschaften und sogar überwiegenden background-color von hover Wirkung nehmen.

Für eine POC, sehen diese bei

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

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

Jetzt ist es über background-color von inline und hier auch eine hohe Priorität nimmt css Arten bin Anwendung i.

Lösung für diese Sache ist, das Hinzufügen ! Important auf 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

Wie @Mr_Green sagte !important Eigenschaft hinzuzufügen, ist nicht Best Practice, Stattdessen können wir eine weitere Klasse hinzufügen, die auch Ihr Problem löst 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>

this helps :)

Answer 5

die Hintergrundfarbe ändern Verwendung von JavaScript, das Element Stil überschrieben.

wenn Sie wirklich den Hover-Effekt hinzufügen möchten mit Hilfe von Javascript Sie auf dieses Thema beziehen: Change :hover CSS properties with JavaScript

Ich empfehle Ihnen, JQuery von Codes für diese Art zu verwenden.

Answer 6

Überprüfen Sie das Snippet. seine Arbeits

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>