Maison interface Web tutoriel CSS Comment éliminer les effets de survol persistant sur les boutons des appareils tactiles ?

Comment éliminer les effets de survol persistant sur les boutons des appareils tactiles ?

Nov 11, 2024 pm 04:58 PM

How to Eliminate Sticky Hover Effects on Buttons for Touch-Enabled Devices?

Comment é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

@media (hover: hover) {

    button:hover {

        background-color: blue;

    }

}

Copier après la connexion

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

html.my-true-hover button:hover {

    background-color: blue;

}

Copier après la connexion

1

2

3

$(document).on('mq4hsChange', function (e) {

    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);

});

Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Ajout d'ombres de boîte aux blocs et éléments WordPress Ajout d'ombres de boîte aux blocs et éléments WordPress Mar 09, 2025 pm 12:53 PM

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éez un formulaire de contact JavaScript avec le cadre Smart Forms Mar 07, 2025 am 11:33 AM

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

Créer un éditeur de texte en ligne avec l'attribut satisfaistable Créer un éditeur de texte en ligne avec l'attribut satisfaistable Mar 02, 2025 am 09:03 AM

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

Faire votre première transition Svelte personnalisée Faire votre première transition Svelte personnalisée Mar 15, 2025 am 11:08 AM

Faire votre première transition Svelte personnalisée

Téléchargement de fichiers avec Multer dans Node.js et Express Téléchargement de fichiers avec Multer dans Node.js et Express Mar 02, 2025 am 09:15 AM

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

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Mar 04, 2025 am 10:22 AM

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

Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement) Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement) Mar 01, 2025 am 09:32 AM

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

Travailler avec GraphQL Caching Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Travailler avec GraphQL Caching

See all articles