So ignorieren Sie :Hover-CSS-Styling auf Touchscreen-Geräten

Herausforderung: Hover-Anzeigeprobleme auf Touch-Geräten überwinden

Die :hover-CSS-Eigenschaft fügt Elementen einen interaktiven Stil hinzu, wenn Sie mit der Maus darüber fahren. Dies stellt jedoch ein Problem auf berührungsempfindlichen Geräten dar, bei denen es keine Möglichkeit zum Schweben gibt. Dies kann zu unerwartetem Verhalten oder Sehstörungen führen, wenn Benutzer mit Elementen auf einem Touchscreen interagieren.

Lösungen:

1. JavaScript-Entfernung von :hover-Stilen

Mit JavaScript können alle CSS-Regeln, die :hover enthalten, entfernt werden, wodurch diese Eigenschaft auf Touch-Geräten effektiv deaktiviert wird. Diese Methode hat jedoch Nachteile:

• Erfordert CSS-Änderungen und Kompatibilitätsprobleme in älteren Browsern.
• Deaktiviert Hover-Effekte auf gemischten Eingabegeräten (z. B. Surface, iPad Pro), was die UX beeinträchtigt .

2. Nur CSS-Medienabfragen

Das Einschließen von :hover-Regeln in @media-Blöcken kann Hover-Effekte auf Touch-Geräten deaktivieren. Dieser Ansatz:

• Ist auf iOS 9.0 und moderne Browser auf Android beschränkt.
• Unterbricht Hover-Effekte in älteren Browsern oder erfordert das Überschreiben aller Hover-Regeln, was sich auf die Flexibilität auswirkt.

3. JavaScript-Erkennung und vorangestelltes CSS

Durch die Erkennung von Berührungseingaben über JavaScript kann dem Dokumentkörper eine spezielle Klasse (z. B. hasHover) hinzugefügt werden. Allen :hover-Regeln kann dann diese Klasse vorangestellt werden, um Hover-Effekte auf Touch-Geräten zu deaktivieren. Obwohl diese Methode gut funktioniert, ist sie auf gemischten Eingabegeräten immer noch mit Herausforderungen verbunden.

4. Dynamische Hover-Erkennung und Klassenumschaltung

Diese Methode kombiniert JavaScript-Ereignisbehandlung und Klassenmanipulation, um Hover-Effekte dynamisch umzuschalten. Es aktiviert Hover-Effekte, wenn ein Mauszeiger erkannt wird, und deaktiviert sie, wenn ein Berührungsereignis auftritt. Dieser Ansatz bietet die robusteste Lösung und funktioniert mit einer Vielzahl von Browsern und Eingabegeräten.