


Comment éliminer les effets de survol persistant sur les boutons des appareils tactiles ?
Nov 11, 2024 pm 04:58 PMComment éliminer les effets de survol persistant sur les boutons des appareils tactiles
Lors de la création de carrousels avec des boutons de navigation permanents, un problème courant survient sur appareils tactiles. Les états de survol des boutons, apparaissant généralement en bleu, deviennent « collants », restant activés même après avoir appuyé sur. Plusieurs approches pour résoudre ce problème ont été explorées :
- L'ajout d'une classe sans survol sur le côté tactile peut résoudre le problème, mais cela peut avoir un impact sur les performances et introduire des problèmes de compatibilité sur des appareils tels que les Chromebooks avec à la fois le toucher et la souris. capacités.
- L'implémentation d'une classe tactile dans documentElement et la modification du CSS en conséquence peuvent également résoudre le problème, mais ce n'est pas optimal pour les appareils dotés à la fois du toucher et de la souris. support.
Une solution idéale serait de supprimer l'état de survol au moment du toucher. Cependant, aucune méthode directe n’est disponible pour cela. Se concentrer sur un autre élément ne supprime pas l'état de survol. Même si appuyer manuellement sur un autre élément le fait, déclencher cette action par programme en JavaScript reste un défi.
Pour résoudre ce problème efficacement, vous pouvez tirer parti des développements récents de CSS Media Queries niveau 4 :
1 2 3 4 5 |
|
Ce CSS indique essentiellement : « Si l'appareil prend en charge le véritable survol (par exemple, s'il dispose d'un périphérique d'entrée principal semblable à une souris), appliquez le bouton de survol. style."
Pour les navigateurs dans lesquels cette fonctionnalité n'est pas encore implémentée, un polyfill JavaScript peut être utilisé pour détecter la prise en charge du survol et activer/désactiver une classe personnalisée, vous permettant d'appliquer le style de survol de manière conditionnelle :
1 2 3 |
|
1 2 3 |
|
Cette solution élimine efficacement les effets de survol persistant pour les appareils tactiles tout en conservant l'esthétique souhaitée sur les appareils avec saisie par souris.
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Téléchargement de fichiers avec Multer dans Node.js et Express

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement)
