Wie können Sie unerwünschte :hover-Effekte auf Touchscreen-Geräten verhindern?

Überwindung von :Hover-Macken auf Touchscreen-Geräten

Problem: :Hover-CSS-Stile werden unbeabsichtigt auf Touch-Geräten ausgelöst, was zu unerwünschten Effekten führt.

Lösung: Implementieren Sie eine umfassende Strategie zum Deaktivieren oder Ignorieren von :hover-Deklarationen auf Touchscreen-Plattformen.

Quick and Dirty: JavaScript-Entfernung

Für einen pragmatischen Ansatz: JavaScript kann verwendet werden, um alle :hover-Stile zu entfernen. Beachten Sie, dass Stylesheets auf derselben Domäne gehostet werden müssen und dies die UX auf gemischten Touch-/Mausgeräten behindern kann.

<code class="js">function hasTouch() {
  // Check for touch capabilities
}

if (hasTouch()) {
  // Remove :hover stylesheets
}</code>

CSS-basierte Lösungen

Medienabfragen:

<code class="css">@media (hover: none) {
  a:hover {
    color: inherit;
  }
}</code>

Diese Lösung funktioniert jedoch nur auf iOS 9.0- oder Android 5.0-Geräten.

Bedingte Regeln:

<code class="css">body.hasHover a:hover {
  color: blue;
}</code>

Dies muss vorangestellt werden alle :hover-Regeln mit einer Klasse (z. B. hasHover), die basierend auf der Touchscreen-Erkennung hinzugefügt oder entfernt wird.

Optimale Erkennung: JavaScript und CSS

Die robusteste Lösung kombiniert die JavaScript-Berührungserkennung mit CSS bedingte Regeln.

<code class="js">function watchForHover() {
  // Detect touch and toggle hasHover class
}</code>

<code class="css">body.hasHover a:hover {
  color: blue;
}</code>

Diese Methode aktiviert Hover-Effekte, wenn eine Maus erkannt wird, und deaktiviert sie bei Berührung.

Implementierungsempfehlungen

Für moderne Browser a Eine Kombination von JavaScript- und CSS-Bedingungsregeln mithilfe von Klassen wird empfohlen. Für ältere Browser ist die JavaScript-basierte Entfernung von :hover-Stilen eine praktikable Option.

Zusätzliche Ressourcen:

• [GitHub-Beispiel](https:// jsfiddle.net/57tmy8j3/)

Das obige ist der detaillierte Inhalt vonWie können Sie unerwünschte :hover-Effekte auf Touchscreen-Geräten verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!