Comment reproduire les effets de survol pour les touches longues dans les navigateurs tactiles ?

Simulation des effets de survol avec des gestes tactiles

Scénario :

Vous disposez d'une page Web avec des éléments HTML stylisés à l'aide de CSS. Plus précisément, vous disposez d'éléments avec un effet "survol", où leur couleur change lorsque le curseur les survole. Cependant, dans un navigateur tactile, vous souhaitez reproduire ce comportement pour les appuis longs.

Solution :

Pour y parvenir, suivez ces étapes :

1. Modifier CSS : Ajoutez la classe suivante à vos éléments HTML pour lesquels vous souhaitez activer les effets de survol :

<code class="css">p {
  color:black;
}

p:hover, p.hover_effect {
  color:red;
}</code>

Cela garantit que le "hover_effect " La classe reproduit le style de la pseudo-classe ":hover".

2. Ajouter du JavaScript : Implémentez le code suivant à l'aide de jQuery :

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

3. Empêcher les comportements par défaut du navigateur : Pour empêcher les actions tactiles par défaut du navigateur (par exemple, le menu contextuel), ajoutez le CSS suivant à votre feuille de style :

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

Cette combinaison de modifications permet des gestes de toucher et de maintenir sur les éléments éligibles pour simuler des événements de survol pour les navigateurs 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!