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

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 :

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

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 :

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

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

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!