J'ai des menus css sur mon site qui se développent avec :hover
(sans js)
Cela fonctionne de manière semi-interrompue sur les iDevices, par exemple, un robinet activera la :hover
règle et développera le menu, mais en tapant ailleurs ne supprimera pas le :hover
. De plus, s'il y a un lien à l'intérieur de l'élément qui est :hover
'ed, vous devez appuyer deux fois pour activer le lien (premier déclencheur tap :hover
, deuxième lien déclencheur tap).
J'ai pu faire fonctionner les choses bien sur iPhone en liant l' touchstart
événement.
Le problème est que parfois le safari mobile choisit toujours de déclencher la :hover
règle depuis le css au lieu de mes touchstart
événements!
Je sais que c'est le problème car lorsque je désactive tous les :hover
manuellement règles dans le css, le safari mobile fonctionne très bien (mais les navigateurs classiques ne le font évidemment plus).
Existe-t-il un moyen «d'annuler» dynamiquement les :hover
règles pour certains éléments lorsque l'utilisateur est en safari mobile?
Voir et comparer le comportement iOS ici: http://jsfiddle.net/74s35/3/ Remarque: que seules certaines propriétés css déclenchent le comportement en deux clics, par exemple display: none; mais pas de fond: rouge; ou texte-décoration: souligné;