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

Surmonter les effets de survol persistants sur les boutons dans les environnements tactiles

Lors de la conception d'une interface utilisateur en pensant aux appareils tactiles, la gestion des effets de survol sur les boutons peut être un défi. Cette tâche apparemment simple devient compliquée en raison de l'état de survol persistant qui se produit sur les écrans tactiles, où l'effet de survol reste activé après le toucher, ce qui entraîne un bouton perpétuellement bleu.

Solutions inefficaces

Bien que des solutions existent, comme l'ajout d'une classe sans survol surtouchend ou l'utilisation d'une classe tactile avec documentElement, ces méthodes présentent des inconvénients. Ils peuvent dégrader les performances et ne pas gérer les appareils dotés à la fois de capacités d'écran tactile et de souris.

Une solution insaisissable

La solution idéale impliquerait de supprimer l'état de survol au moment du toucher, mais la manipulation directe de l’état de survol semble insaisissable. Se concentrer ailleurs ne parvient pas à supprimer l'effet de survol, et le fait d'appuyer manuellement sur un autre élément semble le désactiver, mais le déclenchement programmatique de cette action reste un mystère.

Une percée

L'arrivée de CSS Media Queries Niveau 4 en 2018 a apporté une solution révolutionnaire à ce dilemme :

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

Ce La déclaration indique essentiellement : "Si le navigateur prend en charge le véritable survol (par exemple, un périphérique de saisie semblable à une souris), appliquez le style de survol lorsque les boutons sont survolés."

Pour les navigateurs dépourvus de cette fonctionnalité, un polyfill peut venir à la rescousse. En utilisant ce polyfill, le CSS futuriste ci-dessus peut être transformé en :

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

JavaScript côté client à partir du polyfill détecte ensuite la prise en charge du survol et bascule la présence de la classe my-true-hover en conséquence, offrant un style élégant. solution aux 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!