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

Prévenir les effets de survol persistant pour les boutons des appareils tactiles

L'état de survol persistant sur les boutons des appareils tactiles peut être une nuisance. Pour résoudre ce problème, diverses solutions ont été proposées, mais aucune ne semble pleinement satisfaisante. Une approche consiste à ajouter une classe « sans survol » sur l'extrémité tactile, mais cela a un impact négatif sur les performances et ne prend pas en compte les appareils hybrides. Une autre option consiste à ajouter une classe « tactile » au document, mais cela échoue également sur les appareils dotés à la fois de capacités tactiles et de souris.

La solution idéale : requêtes multimédia CSS niveau 4

Avec l'avènement des CSS Media Queries Niveau 4, une solution plus raffinée a émergé :

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Cette requête multimédia cible spécifiquement les navigateurs avec prise en charge du survol vrai/non émulé (par exemple, appareils dotés de mécanismes de saisie de type souris). Les boutons de ces navigateurs afficheront l'effet de survol bleu.

Polyfill pour les anciens navigateurs

Pour les navigateurs sans cette fonctionnalité, il existe un polyfill JavaScript qui peut simuler une véritable prise en charge du survol :

html.my-true-hover button:hover {
    background-color: blue;
}

Le polyfill détecte les capacités de survol et active la classe "my-true-hover" en conséquence :

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

Cette combinaison de CSS et de JavaScript garantit que les effets de survol fonctionnent parfaitement sur les appareils tactiles modernes et existants.

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!