Comment puis-je éliminer les CSS :hover indésirables sur les appareils tactiles ?

Élimination :hover CSS sur les appareils tactiles

Lorsque les utilisateurs accèdent à des sites Web via des appareils tactiles, les déclarations CSS :hover peuvent devenir indésirables, car ils ne répondent pas efficacement aux entrées tactiles. Les utilisateurs peuvent rencontrer des effets de survol persistants qui peuvent être perturbateurs. Pour résoudre ce problème, plusieurs méthodes sont disponibles pour supprimer ou ignorer les styles :hover sur les appareils tactiles.

Suppression de JavaScript

Une approche consiste à utiliser JavaScript pour éliminer toutes les règles CSS. contenant :hover. Cette méthode est compatible avec les anciens navigateurs et ne nécessite pas de modifications CSS. En vérifiant si l'appareil prend en charge la saisie tactile et en parcourant les règles de style, JavaScript peut supprimer toutes les déclarations :hover.

Requêtes multimédias CSS uniquement

Une autre option utilise @ requêtes multimédias pour restreindre l'application des règles :hover uniquement lorsque l'appareil prend en charge le survol. Toutefois, cette méthode est limitée à iOS 9.0 et Chrome pour Android ou Android 5.0 pour WebViews. De plus, cela peut interrompre les effets de survol sur les appareils mixtes souris et tactiles.

Détection JS et pré-attente CSS

Une solution robuste consiste à détecter la saisie tactile à l'aide de JavaScript et à ajouter tout le préfixe : règles de survol avec une classe de corps personnalisée (par exemple, .hasHover). En appliquant cette classe de manière conditionnelle, les effets de survol ne sont activés que sur les appareils prenant en charge la souris.

Approche combinée du mouvement de la souris et de la détection tactile

La méthode la plus complète combine le mouvement de la souris détection et détection tactile. Les effets de survol sont activés lorsque le mouvement de la souris est détecté et désactivés lorsque la saisie tactile est reconnue. Cette approche offre une expérience transparente sur les appareils tactiles et compatibles avec la souris.

Implémentation pratique

Une implémentation pratique implique des écouteurs d'événements JavaScript et une manipulation de classe de corps. La classe hasHover est ajoutée ou supprimée dynamiquement en fonction des événements de saisie tactile et de mouvement de la souris.

Pour les navigateurs modernes, un exemple en direct peut être trouvé sur https://jsfiddle.net/57tmy8j3/. Une version héritée compatible avec les anciens navigateurs est disponible sur https://jsfiddle.net/dkz17jc5/19/.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!