Maison > interface Web > tutoriel CSS > Pourquoi la pseudo-classe :active ne fonctionne-t-elle pas sur les éléments de Mobile Safari et comment puis-je y remédier ?

Why Doesn't :active Pseudo-Class Work on Mobile Safari's <a> Éléments et comment puis-je y remédier ?
Éléments et comment puis-je y remédier ? " />

:Inactivité de la pseudo-classe active dans Mobile Safari

Problème :

Dans les navigateurs iOS, la spécification de styles pour le pseudo- :active La classe pour les éléments ne parvient pas à s'activer lorsque l'élément est enfoncé. Le problème se produit dans les navigateurs basés sur WebKit sur les iPhones, iPads et. iPods.

Exemple de code :

<style>
  a:active {
    background-color: red;
  }
</style>

<!-- snip -->
<a href="#">Click me</a>
Copier après la connexion

Solution :

Pour résoudre ce problème dans Mobile Safari, appliquez le écouteur d'événement ontouchstart pour l'élément  :

<body ontouchstart="">
  ...
</body>
Copier après la connexion

Cet écouteur d'événement global améliore la réactivité de tous les boutons de la page.

Solution alternative :

Une approche alternative consiste à utiliser la bibliothèque JavaScript Fastclick :

<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<script>
  FastClick.attach(document.body);
</script>
Copier après la connexion

Fastclick accélère les événements de clic sur les appareils tactiles et résout le problème de pseudo-classe :active.

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 de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal