Comment pouvez-vous éviter les effets indésirables du survol sur les appareils à écran tactile ?

Surmonter les bizarreries du survol sur les appareils à écran tactile

Problème : :les styles CSS du survol sont déclenchés involontairement sur les appareils tactiles, provoquant des effets indésirables.

Solution : Mettre en œuvre une stratégie globale pour désactiver ou ignorer les déclarations :hover sur les plateformes à écran tactile.

Rapide et sale : suppression de JavaScript

Pour une approche pragmatique, JavaScript peut être utilisé pour supprimer tous les styles :hover. Notez que les feuilles de style doivent être hébergées sur le même domaine et cela peut gêner l'UX sur les appareils mixtes tactiles/souris.

<code class="js">function hasTouch() {
  // Check for touch capabilities
}

if (hasTouch()) {
  // Remove :hover stylesheets
}</code>

Solutions basées sur CSS

Requêtes multimédias :

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

Cependant, cette solution ne fonctionne que sur les appareils iOS 9.0 ou Android 5.0.

Règles conditionnelles :

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

Cela nécessite d'ajouter un préfixe all :hover règles avec une classe (par exemple, hasHover) qui est ajoutée ou supprimée en fonction de la détection de l'écran tactile.

Détection optimale : JavaScript et CSS

La solution la plus robuste combine la détection tactile JavaScript avec CSS règles conditionnelles.

<code class="js">function watchForHover() {
  // Detect touch and toggle hasHover class
}</code>

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

Cette méthode active les effets de survol lorsqu'une souris est détectée et les désactive lorsqu'elle est touchée.

Recommandations de mise en œuvre

Pour les navigateurs modernes, un une combinaison de règles conditionnelles JavaScript et CSS utilisant des classes est recommandée. Pour les navigateurs existants, la suppression des styles :hover basée sur JavaScript est une option viable.

Ressources supplémentaires :

• [Exemple GitHub](https:// jsfiddle.net/57tmy8j3/)

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!