Wie kann JavaScript CSS-Hover-Effekte deaktivieren?-CSS-Tutorial-php.cn

Wie kann JavaScript CSS-Hover-Effekte deaktivieren?

Barbara Streisand

Freigeben： 2024-12-03 20:12:13

Original

292 Leute haben es durchsucht

How Can JavaScript Disable CSS :hover Effects?

CSS deaktivieren: Hover-Effekt mit JavaScript

Mit JavaScript einen flüssigeren Hover-Effekt zu erzielen und gleichzeitig CSS-Stile beizubehalten, kann eine Herausforderung sein. So beheben Sie das Problem:

Problemstellung:
Verhindern Sie, dass der Browser den CSS-Effekt :hover auf bestimmte Elemente anwendet, wenn JavaScript verfügbar ist.

Lösung:
Es gibt keinen reinen JavaScript-Mechanismus zum Deaktivieren des :hover-Status. Eine Problemumgehung besteht jedoch darin, eine Klasse zur Steuerung des Hover-Effekts in CSS und JavaScript zu verwenden.

HTML:
Fügen Sie eine „nojQuery“-Klasse zum hinzu. Element.

CSS:
Beschränken Sie die :hover-Stile so, dass sie nur angewendet werden, wenn die Klasse „nojQuery“ im vorhanden ist. Element.

JavaScript:
Entfernen Sie beim Laden von JavaScript die Klasse „nojQuery“ aus dem Element, wodurch die Hover-Stile effektiv deaktiviert werden.

Beispiel:

<body class="nojQuery">

Nach dem Login kopieren

body.nojQuery ul#mainFilter a:hover {
  /* CSS-only hover styles here */
}

Nach dem Login kopieren

$(function() {
  $('body').removeClass('nojQuery');
});

Nach dem Login kopieren

Dieser Ansatz ermöglicht es Ihnen, den CSS-Hover-Effekt mit JavaScript ohne zu überschreiben jede einzelne Eigenschaft muss explizit zurückgesetzt werden.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript CSS-Hover-Effekte deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!