PROJET AUTOBLOG


Shaarli - Les discussions de Shaarli

Archivé

Site original : Shaarli - Les discussions de Shaarli du 23/07/2013

⇐ retour index

[CSS] Note : hover & mobile

vendredi 7 août 2015 à 19:57
le hollandais volant
Le :hover compte pour un "touch" de l’écran sur un smartphone.

Sauf que… si vous avez un menu déroulant avec des liens et que l’on "touch" un peu vite, alors le clic du hover peut se répercuter sur le premier lien du menu : du coup, on tape pour ouvrir le menu et on se retrouve sur une nouvelle page, car il a pris en compte le clic sur le lien.

Solution : délayer l’affichage lors du hover, avec les transition CSS.

Perso j’ai ça :

#menu:hover ul {	transition: top .2s ease-in .05s, opacity .2s ease-in .05s, right 0s ease-out .05s;
}


Les .2s sont la durée de l’animation et les 0.05s correspondent au délai avant le démarrage. Ici je prends 50 millisecondes : après quelques essais, ça semble suffisant pour éviter le « clic accidentel » et assez court pour ne rien y voir.
(le hover n’utilise pas de display: none/block. Si vous utilisez ça, la transition ne marche pas.)

Petite astuce, mais fonctionne bien.