Comment simuler les effets de survol sur les écrans tactiles en appuyant longuement ?

Déclenchement des effets de survol sur les appareils tactiles à l'aide d'une pression longue

Pour reproduire les effets de survol sur les appareils tactiles, tels que les smartphones et les tablettes , vous pouvez exploiter une combinaison de CSS et de JavaScript. Voici comment cela fonctionne :

Marquage HTML

Ajoutez une classe nommée "hover" à tout élément auquel vous souhaitez appliquer l'effet de survol. Par exemple :

<code class="html"><p class="hover">Some Text</p></code>

Style CSS

Modifiez votre CSS pour inclure un effet de survol pour les classes :hover et .hover_effect. La classe .hover_effect sera utilisée pour simuler l'effet de survol sur les appareils tactiles :

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

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

JavaScript

Utilisez JavaScript pour détecter les événements d'appui long. Voici un exemple utilisant jQuery :

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

Ce code JavaScript ajoute des gestionnaires d'événements pour les événements touchstart et touchend sur les éléments avec la classe "hover". Lorsqu'un toucher commence ou se termine, il bascule la classe hover_effect sur l'élément touché.

CSS supplémentaire

Pour empêcher le navigateur d'afficher des menus contextuels ou de demander une confirmation lorsque touchant des éléments sur les appareils mobiles, ajoutez les règles CSS suivantes :

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

Résultat

En combinant ces éléments, vous pouvez désormais simuler un effet de survol sur des appareils tactiles. appareils en appliquant un appui long sur les éléments souhaités. Cette méthode peut être utilisée pour créer des éléments interactifs, tels que des boutons ou des liens, sans avoir besoin d'un survol de souris traditionnel.

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!