Maison > Article > interface Web > Comment éviter l'effet de survol persistant pour les boutons des appareils tactiles ?

Comment éviter l'effet de survol persistant pour les boutons des appareils tactiles ?

WBOYavant: 2023-08-22 12:25:06826parcourir

Comment éviter leffet de survol persistant pour les boutons des appareils tactiles ?

Sur les appareils tactiles, lors de l'ajout d'un effet de survol à l'aide de CSS, l'élément devient fixe. Cet article vous apprendra Dites-nous comment résoudre ce problème. Sur les appareils tactiles, il n'y a pas d'effet de survol, le bouton reste donc dans son état d'origine. Non Utilisation de JavaScript : vous pouvez utiliser la fonctionnalité de requête multimédia de CSS pour résoudre ce problème. Appareils pris en charge hover sont ceux qui correspondent à l'exigence "hover: hover". Pour garantir que le CSS suivant est ajouté Sur ces appareils uniquement, utilisez des requêtes multimédias avec cette condition. Seuls les appareils prenant en charge le survol Aucun effet de survol n'est visible sur les appareils tactiles. Lorsque vous survolez ceci, vous pouvez voir l'effet de survol ajouté

Comme vous le savez, la technologie des écrans tactiles ne prend pas en charge le comportement de survol. donc, Lors de la création d'un site Web réactif, vous devez soigneusement réfléchir quand et où l'utiliser. : survolez l'interaction. Certains appareils à écran tactile perdront l'effet de survol des liens simples Ouvrez une URL. Vous verrez le style :hover pendant une courte période avant que la page ne change Sur iOS, car :hover est activé avant l'événement click
Il s'agit de problèmes mineurs qui n'ont aucun impact sur la fonctionnalité du site. Voici un:hover, qui Utilisez soit les propriétés CSS d'affichage ou de visibilité pour afficher ou masquer un autre élément, oui Le vrai problème.

Il existe deux méthodes que vous pouvez utiliser pour résoudre ce problème.

Appareils sans JavaScript - Vous pouvez utiliser les fonctions de requête multimédia CSS pour résoudre ce problème. Appareils prenant en charge cette fonctionnalité hover sont désignés par la condition "hover: hover". Ajout du CSS suivant uniquement sur ces appareils. L’utilisation des requêtes multimédias avec cette condition est garantie.

Extrait de code

@media(hover: hover) {
   #btn:hover {
      background-color: #ccf6c8;
   }
}

La traduction chinoise de

Exemple 1

est :

Exemple 1

Cela ajoute uniquement des effets de survol pour les appareils prenant en charge le survol ; il n'y a pas d'effets de survol pour les appareils tactiles. exister Dans ce cas, la couleur de fond du bouton change lorsque la souris passe dessus. Sur les appareils tactiles, il y a Il n'y a pas d'effet de survol, le bouton reste donc dans son état d'origine.

<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #myButton {
         background-color: #096381;
         margin: 3%;
         font-size: 30px;
         color: #fff;
      }
      @media (hover: hover) {
         #myButton:hover {
            /*On devices that support hover, add a hover effect to the button.*/
            background-color: #0a92bf;
         }
      }
   </style>
</head>
<body>
   <h2>Welcome to TutorialsPoint!</h2>
   <p>Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments.</p>
   <button type="button" id="myButton">
      Submit
   </button>
</body>
</html>

Le code ci-dessus produira le résultat suivant : Ceci est le résultat sur un écran non tactile.

Deuxième étape utilisant JavaScript - Dans cette méthode, la fonction JavaScript suivante sera utilisée pour vérifier Que nous utilisions ou non des appareils tactiles. Chaque fois que l'utilisateur touche un élément, La réponse à l'événement ontouchstart renvoie une valeur vraie. Nombre maximum de points de contact consécutifs que l'appareil prend en charge est renvoyé par navigator.maxTouchPoints.

Les fonctionnalités prises en charge par cet appareil sont renvoyées par navigator.maxTouchPoints

Dans navigator.msMaxTouchPoints, la même fonctionnalité est disponible sous le préfixe du fournisseur "ms" Cible les navigateurs IE 10 et antérieurs. Par conséquent, si l'appareil prend en charge la fonctionnalité tactile, le la fonction renvoie vrai.

Extrait de code

function is_touch_enabled() {
   return ('ontouchstart' in window) ||
   (navigator.maxTouchPoints > 0) ||
   (navigator.msMaxTouchPoints > 0);
}

Exemple 2

se traduit par :

Exemple 2

Dans cet exemple, voyons comment ajouter une classe à notre bouton si la fonctionnalité tactile n'est pas activée. Comme indiqué ci-dessous :

Dans le code ci-dessous, cette classe fournit un effet de survol du bouton en CSS −

<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      #myButton {
         background-color: #096381;
         margin: 3%;
         font-size: 30px;
         color: #fff;
      }
      .myButton2:hover {
         background-color: #0a92bf !important;
         /*The myButton2 class now has a hover effect.*/
      }
   </style>
</head>
<body onload="touchHover()">
   <p>TutorialsPoint have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. <br>You will have to register with us to avail these premium services.</p>
   <button type="button" id="myButton">Submit</button>
   <script>
      function touchHover() {
         function is_touch_enabled() {
            // Verify that touch is turned on
            return "ontouchstart" in window || navigator.maxTouchPoints > 0 ||
               navigator.msMaxTouchPoints > 0;
         }
         if (!is_touch_enabled()) {
            // Add the "myButton2" class if touch is not enabled.
            let verifyTouch = document.getElementById("myButton");
            verifyTouch.classList.add("myButton2");
         }
      }
   </script>
</body>
</html>

Le code ci-dessus produira le résultat suivant : Ceci est le résultat sur un appareil non tactile.

Comme il n'y a pas d'effet de survol sur les appareils tactiles, les boutons restent dans leur état d'origine.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment obtenir le code source d’une image en utilisant FabricJS ?Article suivant：Comment obtenir le code source d’une image en utilisant FabricJS ?

Articles Liés

Voir plus