Comment pouvons-nous empêcher les effets de survol persistant sur les boutons des appareils tactiles ?

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

Lors de la création d'interfaces utilisateur pour les appareils de bureau et tactiles, il est crucial de prendre en compte le problème des effets de survol collants sur les boutons. Sur les appareils tactiles, l'état de survol, qui est généralement indiqué par la modification de la couleur d'arrière-plan de l'élément, peut rester bloqué, même après que le bouton a été relâché.

Solutions pour éviter les effets de survol persistant

Plusieurs solutions ont été proposées pour résoudre ce problème :

• Supprimer le survol class : Bien que cette méthode soit simple, elle peut s'avérer inefficace et ne pas fonctionner correctement sur les appareils prenant en charge à la fois la saisie tactile et la saisie avec la souris.
• Ajout d'une classe tactile : Cette technique également a des limites, car il ne prend pas en compte les appareils dotés de méthodes de saisie mixtes.

Le préféré Solution

La solution idéale serait de supprimer l'état de survol au toucher. Cependant, cela semble irréalisable avec les méthodes conventionnelles telles que la focalisation d'un autre élément ou le déclenchement d'un tapotement manuel en JavaScript.

Solution Media Queries Niveau 4

Cependant, avec la mise en œuvre généralisée du CSS Media Queries Niveau 4 depuis 2018, une solution plus élégante est disponible :

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

Cette règle CSS indique que lorsque le Le navigateur prend en charge le véritable survol (indiquant généralement l'utilisation d'un périphérique d'entrée principal semblable à une souris), les styles de survol seront appliqués aux boutons. Cela empêche efficacement les effets de survol sur les appareils tactiles.

Polyfill pour les anciens navigateurs

Pour les navigateurs qui ne prennent pas en charge les requêtes multimédias CSS niveau 4, un polyfill peut être utilisé pour implémenter une solution similaire :

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

Le code JavaScript du polyfill peut alors basculer le Classe my-true-hover basée sur la prise en charge du survol :

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

En utilisant cette solution, les développeurs peuvent garantir que les boutons ont des effets de survol appropriés sur les navigateurs de bureau tout en empêchant les effets de survol persistants sur les appareils tactiles.

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!