Mot-clef « Rollover »

En intégrant la nouvelle charte par défaut d'RBS Change (à venir avec la prochaine version 3.6), j'ai intégré quelques blocs avec du rollover (notamment le sélecteur de langues ou le bloc de récap du panier).

Ça fonctionne très bien via du CSS avec la pseudo-classe hover, si ce n'est que sur iPhone tous ne passent pas : le menu déroulant marche sans problème, par contre le bloc de sélection des langues ne passe pas. Le point qui bloque c'est que dans le menu il y a des liens sur les items qu'on survole, du coup au premier "clic" l'iPhone active le hover au lieu de suivre le lien (qui n'est suivi qu'au second clic) alors que quand on n'a pas de liens il n'active pas le hover.

J'ai cherché des solution sur le net et je suis tombé sur pas mal de chose pas super convaincantes :

• une solution basée sur des événements spécifiques au tactile : "touchstart" et "touchend" (comme expliqué là par exemple) mais que je n'ai pas réussi à faire marcher...
• passer par l'événement "clic" pour placer puis enlever comme dans solution précédente une classe "hover" sur les éléments

Dans les deux cas c'est loin d'être parfait... Notamment dans le 2e cas, ça merdouille si on a les style à la fois sur la pseudo-classe hover (pour tout ce qui n'est pas tactile c'est quand même mieux vu qu'on ne dépend pas de JavaScript) et sur la classe ajoutée.

Finalement, du coup j'ai compris que l'iPhone active le hover à partir du moment où on place un listener sur l'événement "clic" ! Du coup j'ai simplement mis un listener au clic sur mon élément où je veux appliquer le hover qui ne fait rien de particulier et mon problème est réglé sans pourrir mes styles avec une classe ajoutée à la volée \o/

Donc concrètement, si par exemple j'ai ce code HTML :

<div class="test">
  Toto
  <p>Visible uniquement au survol</p>
</div>

.test p {
  display: none;
}
.test:hover p {
  display: block;
}

Ça fonctionnera très bien sur un ordinateur mais pas sur un iPhone ou un iPad, à moins d'y ajouter ce code JavaScript (utilisant jQuery mais j'imagine que ça doit marcher sans aussi...) :

jQuery(document).ready(function() {
  jQuery('.test').click(function() {});
});