Pseudo-classes hover et active : bien les utiliser en responsive

En responsive, on utilise souvent les pseudo-classes pour styliser des éléments comme les liens par exemple.

Sur la version desktop, on souhaite souvent utiliser l’animation au survol avec la pseudo-classe :hover. Par contre, sur les versions tablettes et mobiles, le survol (:hover) n’a pas de logique et on préfère souvent donner de l’effet lorsque nous appuyons dessus en utilisant la pseudo-classe :active par exemple.

Pour que ces pseudo-classes fonctionnent correctement et pour éviter les effets de bord, il faut penser à bien séparer les 2 dans le css à l’aide des médias queries. Dans l’exemple ci dessous, Le :hover c’est pour le desktop et le :active pour mobiles et tablettes.

Attention, je n’ai pas dit que « le :active, c’est uniquement pour les tablettes et mobiles ». Il peut très bien s’utiliser sur desktop.

Codepen - hover et active

Si je n’avais pas séparé, qu’est-ce qui ce serait passé ?

Codepen - hover et active

Sur desktop, pas trop de problèmes. Le hover remplirait bien son job et on aurait aussi un effet lors du clic avec le :active (ce qui n’est pas le plus génant).

Maintenant sur mobiles et tablettes, c’est une autre histoire. Le :hover est tout de même reconnu lorsque l’on appuie dessus (pas pour tout les mobiles et tablettes, mais pour beaucoup). Le problème, c’est qu’il n’a pas le comportement que l’on attend.

Si j’appuie sur mon lien, le :active fonctionne correctement, et au tout début mon lien devient bien rouge. Par contre, dès que je relâche, le :hover s’est lui aussi déclenché et le bouton va devenir bleu en permanence. Ce n’était pas du tout l’effet recherché.

bouton_rouge

bouton_bleu

 

Tout ça pour dire de bien ranger les choses au bon endroit, en séparant bien à l’aide de médias queries pour obtenir le résultat attendu et ne pas avoir de mauvaises surprises.

Le code source utilisé pour l’exemple est disponible sur le lien http://codepen.io/SoisNet/pen/VKEJJm .

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.