Comment puis-je simuler les effets de survol sur les appareils tactiles ?

Simulation des effets de survol sur les appareils tactiles

Avec l'utilisation généralisée des appareils tactiles, la reproduction des interactions classiques de la souris telles que les effets de survol peut être un défi. Ce problème survient lorsque vous tentez de créer des effets de survol en utilisant uniquement CSS, car il ne s'applique qu'aux entrées de la souris. Heureusement, il existe une solution qui consiste à intégrer JavaScript et à modifier le CSS.

Implémentation de la simulation

Pour simuler les effets de survol lors d'un toucher long, suivez ces étapes :

1. Ajoutez une classe appelée "hover" à l'élément HTML où vous souhaitez que l'effet de survol se produise.
2. Ajouter le code JavaScript suivant pour activer la gestion tactile :

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

3. Dans le CSS, modifiez la définition de l'effet de survol pour inclure la classe ".hover_effect" :

element:hover, element.hover_effect {
    rule:properties;
}

4. Facultativement, ajoutez le CSS suivant pour désactiver la sélection du navigateur sur touch :

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

Explication

Cette solution tire parti des événements « touchstart » et « touchend » déclenchés sur les appareils tactiles. Lorsque le doigt de l'utilisateur touche l'écran, l'événement « touchstart » se déclenche et ajoute la classe « hover_effect » à l'élément HTML avec la classe « hover ». Lorsque le toucher se termine, l'événement 'touchend' est déclenché, supprimant la classe 'hover_effect', simulant ainsi efficacement l'effet de survol.

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!