Comment implémenter des effets de survol sur les écrans tactiles à l'aide de CSS et JavaScript ?

Comment émuler l'interaction de survol sur les écrans tactiles

Dans le domaine du développement Web, la simulation des effets de survol sur des appareils tactiles est une tâche persistante défi. Mais n'ayez crainte, car il existe une solution intelligente qui combine CSS et JavaScript pour en faire un jeu d'enfant.

Imaginez que vous ayez un élément avec du texte et des styles appliqués, y compris un effet de survol qui change la couleur de la police. Supposons que vous souhaitiez étendre cette fonctionnalité de survol aux événements tactiles sur les appareils à écran tactile. Voici comment procéder :

Étape 1 : Ajuster le CSS

Au lieu d'utiliser les sélecteurs ":hover" standards, nous allons créer une nouvelle classe CSS appelée "hover_effect ". Cette classe sera responsable de l'application des styles de survol.

<code class="css">element:hover, element.hover_effect {
    color: red;
}</code>

Étape 2 : Ajouter des écouteurs d'événements tactiles à l'aide de JavaScript

Ensuite, nous utiliserons jQuery pour écouter pour les événements tactiles sur les éléments que nous voulons rendre planables.

<code class="javascript">$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});</code>

Ce script garantit que lorsqu'un toucher commence ou se termine sur un élément avec la classe "hover", la classe "hover_effect" est basculée, effectivement simulant l'état de survol.

Étape 3 : Éviter les comportements indésirables du navigateur (facultatif)

Pour améliorer l'expérience utilisateur, ajoutez cet extrait de code CSS pour empêcher le navigateur d'afficher les menus. ou des invites liées à la copie ou à la sélection de l'élément :

<code class="css">.hover {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}</code>

Et voilà ! En modifiant le CSS et en implémentant un simple script JavaScript, vous pouvez déclencher de manière transparente des effets de survol sur les écrans tactiles, offrant ainsi à vos utilisateurs une expérience cohérente et intuitive sur tous les appareils.

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!