So lösen Sie das Problem des ungültigen Hovers in js

Dies wird tatsächlich durch die Priorität von CSS verursacht.

Schauen wir uns zunächst an, wie Hover die Hintergrundfarbe normal festlegen kann, ohne js zum Hinzufügen von CSS-Attributen zu verwenden.

<div id="add"></div>

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

Das Bild auf der linken Seite ist standardmäßig und das Bild auf der Rechts ist die Zeit, in der die Maus platziert wird, jetzt kann der Hover immer noch normal angezeigt werden.

(Die Bilder unten sind alle standardmäßig auf der linken Seite und schweben auf der rechten Seite. Dies sollte daran liegen, dass das Screenshot-Tool die Maus nicht erfassen kann.)

Aber wenn der CSS-Stil über js eingefügt wird, Der Hover-Stil wird verwendet, wenn die Maus platziert wird. Er wird nicht wirksam.

var add = document.getElementById("add");
add.style.backgroundColor = "red";

Das im Hover festgelegte Attribut #000 ist jetzt ungültig.

Dies ist jedoch nicht die Funktion, die die Hover-Pseudoklasse verloren hat. Wenn es sich bei der Einstellung nicht um einen von js hinzugefügten Stil handelt, können Sie sehen, dass Hover nicht ungültig ist. Versuchen Sie beispielsweise, eine Schriftfarbe hinzuzufügen.

#add:hover{
  background-color: #000;
  color: yellow;
}

Sie können sehen, dass sich die Schriftfarbe noch ändert.

Der Grund dafür ist, dass der CSS-Stil, der zu js hinzugefügt werden soll, direkt zum Stil des HTML-Tags hinzugefügt wird und die Priorität des Stils höher ist als die der CSS-Pseudoklasse.

Von oben nach unten Stil, Hover, ID-Auswahl.

Sie können im Browser-Debugging-Tool sehen, dass js direkt zum Stil hinzugefügt wird.

Was sollen wir also tun?

Es geht um die Priorität des Selektors. Es wurde jedoch nicht über die Priorität von CSS-Pseudoklassen und -Stilen gesprochen.

Aber die Pseudoklasse :hover ist ebenfalls ungültig. Beschreibungsstil>CSS-Pseudoklasse>id>Klasse.

Fügen Sie einfach !important nach dem :hover-Attribut hinzu. Sollte vor allem anderen Priorität haben! !

!important>style>css pseudo-class>id>class.

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

Jetzt habe ich endlich das gewünschte Ergebnis erreicht.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem des ungültigen Hovers in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!