Comment empêcher le style CSS :hover de perturber votre expérience d'écran tactile ?

Comment ignorer le style CSS du survol sur les appareils à écran tactile

Défi : surmonter les problèmes d'affichage du survol sur les appareils tactiles

La propriété CSS :hover ajoute un style interactif aux éléments lorsqu'ils sont survolés avec la souris. Cela pose cependant un problème sur les appareils tactiles, où il n’y a pas de notion de survol. Cela peut entraîner un comportement inattendu ou des perturbations visuelles lorsque les utilisateurs interagissent avec des éléments sur un écran tactile.

Solutions :

1. Suppression JavaScript des styles :hover

À l'aide de JavaScript, toutes les règles CSS contenant :hover peuvent être supprimées, désactivant ainsi cette propriété sur les appareils tactiles. Cependant, cette méthode présente des inconvénients :

• Nécessite des modifications CSS et des problèmes de compatibilité dans les anciens navigateurs.
• Désactive les effets de survol sur les périphériques d'entrée mixtes (par exemple, Surface, iPad Pro), ce qui altère l'UX. .

2. Requêtes multimédias CSS uniquement

Le fait d'inclure des règles de survol dans les blocs @media peut désactiver les effets de survol sur les appareils tactiles. Cependant, cette approche :

• Est limitée à iOS 9.0 et aux navigateurs modernes sur Android.
• Interrompt les effets de survol dans les navigateurs plus anciens ou nécessite de remplacer toutes les règles de survol, ce qui a un impact sur la flexibilité.

3. Détection JavaScript et pré-attente CSS

En détectant la saisie tactile via JavaScript, une classe spéciale (par exemple, hasHover) peut être ajoutée au corps du document. Toutes les règles :hover peuvent ensuite être précédées de cette classe pour désactiver les effets de survol sur les appareils tactiles. Bien que cette méthode fonctionne bien, elle reste confrontée à des défis sur les périphériques d'entrée mixtes.

4. Détection dynamique de survol et basculement de classe

Cette méthode combine la gestion des événements JavaScript et la manipulation de classe pour basculer dynamiquement les effets de survol. Il active les effets de survol lorsqu'un curseur de souris est détecté et les désactive lorsqu'un événement tactile se produit. Cette approche fournit la solution la plus robuste, fonctionnant sur un large éventail de navigateurs et de périphériques d'entrée.

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!