Comment simuler les effets de survol sur les appareils tactiles ?

Simulation des effets de survol sur les appareils tactiles

Les appareils tactiles n'ont pas la fonctionnalité de survol traditionnelle des souris. Cela pose un défi lorsque l'on tente de reproduire des effets de survol en utilisant uniquement CSS.

Pour résoudre ce problème, une solution intelligente consiste à modifier le CSS et à incorporer du JavaScript. À l'aide de jQuery, l'extrait suivant fait basculer une classe sur les événements de début et de fin tactiles, simulant efficacement un état de survol :

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

Dans le HTML, ajoutez simplement la classe "hover" aux éléments que vous souhaitez survoler.

Pour imiter les effets des règles de survol CSS, modifiez votre CSS pour utiliser la syntaxe suivante :

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

De plus, ajoutez le CSS suivant pour empêcher le navigateur d'interférer avec l'effet de survol :

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

Grâce à ces modifications, les appareils tactiles simuleront désormais les effets de survol, offrant ainsi une expérience utilisateur plus intuitive.

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!