Wie kann ich unerwünschtes :hover-CSS auf Touch-fähigen Geräten beseitigen?

Beseitigung von :hover-CSS auf Touch-fähigen Geräten

Wenn Benutzer über Touch-Geräte auf Websites zugreifen, können :hover-CSS-Deklarationen unerwünscht werden, z Sie reagieren nicht effektiv auf Berührungseingaben. Bei Benutzern kann es zu anhaltenden Schwebeeffekten kommen, die störend sein können. Um dieses Problem zu beheben, stehen mehrere Methoden zum Entfernen oder Ignorieren von :Hover-Stilen auf Touch-Geräten zur Verfügung.

JavaScript-Entfernung

Ein Ansatz besteht darin, JavaScript zu verwenden, um alle CSS-Regeln zu entfernen enthält :hover. Diese Methode ist mit älteren Browsern kompatibel und erfordert keine CSS-Änderungen. Durch die Überprüfung, ob das Gerät Berührungseingaben unterstützt, und das Durchlaufen der Stilregeln kann JavaScript alle :hover-Deklarationen entfernen.

Nur ​​CSS-Medienabfragen

Eine weitere Option nutzt @ Medienabfragen, um die Anwendung von :hover-Regeln nur dann einzuschränken, wenn das Gerät Hover unterstützt. Diese Methode ist jedoch auf iOS 9.0 und Chrome für Android bzw. Android 5.0 für WebViews beschränkt. Darüber hinaus können Hover-Effekte auf gemischten Maus- und Touch-Geräten unterbrochen werden.

JS-Erkennung und vorangestelltes CSS

Eine robuste Lösung besteht darin, Berührungseingaben mithilfe von JavaScript zu erkennen und allen voranzustellen: Hover-Regeln mit einer benutzerdefinierten Body-Klasse (z. B. .hasHover). Durch die bedingte Anwendung dieser Klasse werden Hover-Effekte nur auf Geräten mit Mausunterstützung aktiviert.

Kombinierter Ansatz aus Mausbewegung und Berührungserkennung

Die umfassendste Methode kombiniert Mausbewegungen Erkennung und Berührungserkennung. Hover-Effekte werden aktiviert, wenn eine Mausbewegung erkannt wird, und deaktiviert, wenn eine Berührungseingabe erkannt wird. Dieser Ansatz bietet ein nahtloses Erlebnis sowohl auf Touch- als auch auf mausfähigen Geräten.

Praktische Implementierung

Eine praktische Implementierung umfasst JavaScript-Ereignis-Listener und die Manipulation von Körperklassen. Die hasHover-Klasse wird basierend auf Berührungseingaben und Mausbewegungsereignissen dynamisch hinzugefügt oder entfernt.

Für moderne Browser finden Sie ein Live-Beispiel unter https://jsfiddle.net/57tmy8j3/. Eine mit älteren Browsern kompatible Legacy-Version ist unter https://jsfiddle.net/dkz17jc5/19/ verfügbar.

Das obige ist der detaillierte Inhalt vonWie kann ich unerwünschtes :hover-CSS auf Touch-fähigen Geräten beseitigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!