So deaktivieren Sie :hover-Stile auf Touch-Geräten effektiv: Eine umfassende Anleitung

So deaktivieren Sie :Hover-Stile auf Touch-Geräten: Eine umfassende Anleitung

Problem:
Wenn Touch-Geräte Websites besuchen, geschieht Folgendes: Hover-CSS-Stil löst bei Klicks oder Tippen aus. Dies kann ablenken oder sogar dazu führen, dass interaktive Elemente nicht zugänglich sind.

Ziel:
Alle :hover-CSS-Deklarationen für Touch-Geräte entfernen oder ignorieren, ohne den Selektor jeder Deklaration zu kennen.

Lösungen:

JavaScript-Entfernung

Entfernen Sie alle CSS-Regeln, die :hover enthalten, mithilfe von JavaScript.

<code class="javascript">if (hasTouch()) {
  for (var si in document.styleSheets) {
    for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
      if (styleSheet.rules[ri].selectorText.match(':hover')) {
        styleSheet.deleteRule(ri);
      }
    }
  }
}</code>

Vorteile:

• Kompatibel mit älteren Browsern und erfordert keine CSS-Änderungen.
  Nachteile:
• Deaktiviert den Mauszeiger auf gemischten Maus- und Touch-Geräten, was die Benutzererfahrung beeinträchtigt.
• Es können nur Stylesheets entfernt werden, die auf derselben Domain gehostet werden.

Nur ​​CSS mit Medienabfragen

Verwenden Sie @media-Blöcke, um :hover-Regeln zu enthalten.

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

Vorteile:

• Einfach in CSS zu implementieren.
  Nachteile:
• Erfordert Unterstützung für Hover-Medien Abfragen (iOS 9.0, Chrome für Android, Android 5.0).
• Inkonsistent für gemischte Maus- und Touch-Geräte.

Berührungserkennung und CSS-Injection

Berührungsereignisse erkennen Verwenden Sie JavaScript und fügen Sie bedingt eine CSS-Klasse hinzu.

<code class="js">if (!hasTouch()) document.body.className += ' hasHover'</code>

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

Vorteile:

• Zuverlässiger als Medienabfragen für Mixed-Touch-Geräte.
  Nachteile:
• Immer noch von Berührungsemulationsereignissen betroffen (z. B. Mauszeiger auf Touchscreens).

Ultimative Lösung: Dynamische Schwebeerkennung

Aktivieren oder deaktivieren Sie Hover-Stile basierend auf Mauszeiger- und Berührungsereignissen.

<code class="js">function watchForHover() {
  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)
}</code>

Vorteile:

• Die robusteste Lösung, funktioniert auf allen Browsern.
• Passt den Hover-Stil dynamisch an die Geräteeingabe an.
  Nachteile:
• Verfügt über eine kurze Verzögerung nach Berührungsereignissen (z. B. 500 ms), um emulierte Mausbewegungsereignisse zu verhindern.

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie :hover-Stile auf Touch-Geräten effektiv: Eine umfassende Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!