Comment pouvez-vous désactiver efficacement les styles CSS :hover sur les appareils tactiles ?

Ignorer les styles CSS :hover sur les appareils tactiles

Lors du développement de sites Web, il est souhaitable de supprimer ou d'ignorer les déclarations CSS :hover pour les appareils tactiles, car ces déclarations peuvent être gênantes et inutiles.

Rapide et sale : utiliser JavaScript

Une approche consiste à utiliser JavaScript pour supprimer toutes les règles de style contenant :hover. Cette méthode est compatible avec les anciens navigateurs et ne nécessite pas de modification du CSS.

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (hasTouch()) {
  // Loop through stylesheets and remove :hover rules.
  ...
}</code>

Limitations :

• Les feuilles de style doivent être hébergées sur le même domaine.
• Les appareils mixtes souris et tactiles peuvent toujours déclencher des événements :hover, ce qui a un impact négatif sur l'expérience utilisateur.

CSS uniquement : requêtes multimédias

Vous pouvez également utiliser des requêtes multimédias pour désactiver les styles :hover pour certains appareils.

<code class="css">@media (hover: none) {
  a:hover {
    color: inherit;
  }
}</code>

Limitations :

• Nécessite des requêtes multimédias, qui ne sont pas pris en charge par tous les navigateurs.
• Ne fonctionne pas sur les appareils mixtes souris et tactiles.

Le plus robuste : détection JavaScript

Pour le solution la plus fiable, détectez les événements tactiles à l'aide de JavaScript et ajoutez les règles :hover avec une classe personnalisée.

<code class="css">body.hasHover a:hover {
  color: blue;
}</code>

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (!hasTouch()) {
  document.body.className += ' hasHover';
}</code>

Cette méthode surmonte les limites des approches CSS uniquement, mais peut toujours rencontrer des problèmes sur les souris mixtes et appareils tactiles.

Pour résoudre ce problème, mettez en œuvre une approche plus sophistiquée qui active les effets de survol basés sur le mouvement du curseur de la souris et les désactive lors des événements tactiles.

<code class="javascript">function watchForHover() {
  // Initialize variables for touch detection.
  ...

  // Add or remove the "hasHover" class depending on user actions.
  ...
}

watchForHover();</code>

Cette solution offre une détection et une gestion fiables. de styles de survol sur tous les appareils, sans compromettre l'expérience utilisateur.

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!