: la pseudo-classe active ne fonctionne pas dans Mobile safari
Dans Webkit sur iPhone / iPad / iPod, spécifier un style pour une pseudo-classe: active pour une balise <a> ne se déclenche pas lorsque vous appuyez sur l'élément. Comment puis-je obtenir ce pour déclencher? Exemple de code:
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>
11 réponses
<body ontouchstart="">
...
</body>
Appliqué une seule fois, par opposition à chaque élément de bouton semblait fixer tous les boutons sur la page. Vous pouvez également utiliser cette petite bibliothèque JS appelée ' Fastclick '. Il accélère les événements de clic sur les appareils tactiles et prend également en charge ce problème.
Ajouter un gestionnaire d'événements pour ontouchstart dans votre balise . Cela provoque le CSS pour fonctionner comme par magie.
<a ontouchstart="">Click me</a>
Comme d'autres réponses l'ont indiqué, iOS Safari ne déclenche pas la pseudo-classe :active à moins qu'un événement tactile ne soit attaché à l'élément, mais jusqu'à présent ce comportement a été "magique". Je suis tombé sur ce petit texte de présentation sur la Safari Developer Library qui l'explique (emphase mine):
Vous pouvez également utiliser la propriété
-webkit-tap-highlight-colorCSS en combinaison avec la définition d'un événement tactile pour configurer les boutons pour qu'ils se comportent de manière similaire au bureau. sur iOS, les événements de souris sont envoyés si rapidement que l'état bas ou actif n'est jamais reçu. par conséquent, le pseudo-état:activeest déclenché uniquement lorsqu'un événement tactile est défini sur L'élément HTML-par exemple, lorsque ontouchstart est défini sur l'élément comme suit:<button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);"> Testing Touch on iOS </button>Maintenant, lorsque le bouton est appuyé et maintenu sur iOS, le bouton passe à la couleur spécifiée sans que la couleur grise transparente environnante n'apparaisse.
En d'autres termes, définir un événement ontouchstart (même s'il est vide) est explicitement révélateur le navigateur pour réagir aux événements tactiles.
À mon avis, c'est un comportement défectueux, et remonte probablement à l'époque où le web "mobile" était fondamentalement inexistant (jetez un oeil à ces captures d'écran sur la page liée pour voir ce que je veux dire), et tout était orienté souris. Il est intéressant de noter que d'autres navigateurs mobiles plus récents, tels que sur Android, affichent un pseudo-état `:active' au toucher, sans aucun hacks comme ce qui est nécessaire pour iOS.
(côté-note: Si vous si vous souhaitez utiliser vos propres styles personnalisés sur iOS, vous pouvez également désactiver la boîte translucide grise par défaut utilisée par iOS à la place du pseudo-état :active en utilisant la propriété -webkit-tap-highlight-color CSS, comme expliqué dans la même page liée ci-dessus.)
Après quelques expérimentations, la solution attendue de définir un événement ontouchstart sur l'élément <body> quetous les événements touch puis bubble ne fonctionne pas complètement. Si l'élément est visible dans la fenêtre lorsque la page se charge, cela fonctionne bien, mais faire défiler vers le bas et appuyer sur un élément qui était hors de la fenêtre ne pas déclencher le pseudo-état :active comme il se doit. Donc, au lieu de
<!DOCTYPE html>
<html><body ontouchstart></body></html>
Attachez l'événement à tous les éléments au lieu de compter sur l'événement qui bouillonne dans le corps (en utilisant jQuery):
$('body *').on('touchstart', function (){});
Cependant, je ne suis pas conscient des implications de performance de cela, alors méfiez-vous.
EDIT: Il y a un défaut sérieux avec cette solution: même toucher un élément lors du défilement la page activera le pseudo-état :active. La sensibilité est trop forte. Android résout cela en introduisant un très petit délai avant que l'état ne soit affiché, qui est annulé si la page défile. À la lumière de cela, je suggère de l'utiliser uniquement sur certains éléments. Dans mon cas, je développe une application web pour une utilisation sur le terrain qui est essentiellement une liste de boutons pour naviguer dans les pages et soumettre des actions. Parce que toute la page est à peu près des boutons dans certains cas, cela ne fonctionnera pas pour moi. Vous pouvez, cependant, définissez le pseudo-état :hover à remplir pour cela à la place. Après avoir désactivé la boîte grise par défaut, cela fonctionne parfaitement.
Utilisez-vous toutes les pseudo-classes ou juste l'une? Si vous utilisez au moins deux, assurez-vous qu'ils sont dans le bon ordre ou ils cassent tous:
a:link
a:visited
a:hover
a:active
..dans cet ordre. De plus, si vous utilisez simplement: active, ajoutez un: link, même si vous ne le coiffez pas.
//hover for ios
-webkit-tap-highlight-color: #ccc;
Cela fonctionne pour moi, ajoutez à votre CSS sur l'élément que vous voulez mettre en surbrillance
À partir du 8 décembre 2016, la réponse acceptée (<body ontouchstart="">...</body>) ne fonctionne pas pour moi sur Safari 10 (iPhone 5s): ce hack ne fonctionne que pour les éléments visibles lors du chargement de la page.
Cependant, en ajoutant:
<script type='application/javascript'>
document.addEventListener("touchstart", function() {}, false);
</script>
Au head fonctionne comme je le veux, avec l'inconvénient que maintenant tous les événements tactiles pendant le défilement déclenchent également le pseudo-état :active sur les éléments touchés. (Si c'est un problème pour vous, vous pouvez considérer FighterJet :hover solution de contournement.)
Ce fonctionne pour moi:
document.addEventListener("touchstart", function() {},false);
Remarque: Si vous faites cette astuce, il vaut également la peine de supprimer la couleur par défaut Tap-highlight Mobile Safari applique en utilisant la règle CSS suivante.
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
J'ai publié un outil qui devrait résoudre ce problème pour vous.
En surface, le problème semble simple, mais en réalité, le comportement touch & click doit être personnalisé assez largement, y compris les fonctions de timeout et des choses comme "ce qui se passe lorsque vous faites défiler une liste de liens "ou"ce qui se passe lorsque vous appuyez sur link, puis déplacez la souris/le doigt loin de la zone active"
Cela devrait tout résoudre en même temps: https://www.npmjs.com/package/active-touch
Vous vous devez soit avoir votre: styles actifs affectés à .classe active ou choisissez votre propre nom de classe. Par défaut, le script fonctionnera avec tous les éléments de lien, mais vous pouvez l'écraser avec votre propre tableau de sélecteurs.
Commentaires honnêtes et utiles et contributions très appréciées!
Une solution est de s'appuyer sur :target au lieu de :active:
<style>
a:target {
background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>
Le style sera déclenché lorsque l'ancre est ciblée par l'url actuelle, qui est robuste même sur mobile. L'inconvénient est que vous avez besoin d'un autre lien pour effacer l'ancre dans l'url. Exemple complet:
a:target {
background-color: red;
}<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>Aucun 100% lié à cette question, mais vous pouvez utiliser CSS sibling hack pour y parvenir aussi
HTML
<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>
SCSS
input {
&:checked + label {
background-color: red;
}
}
Si vous souhaitez utiliser une infobulle html / CSS pure
span {
display: none;
}
input {
&:checked ~ span {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
a{color: red;}
a:hover{color: blue;}
</style>
</head>
<body>
<div class="main" role="main">
<a href="#">Hover</a>
</div>
</body>
</html>