Retard: Survol de CSS3?

Est-il possible de retarder l’événement: Hover sans utiliser javascript? Je sais qu’il y a un moyen de retarder les animations, mais je n’ai rien vu pour retarder l’événement: Hover.

Édité…

Désolé, j’aurais dû inclure cela pour commencer … Je construis un menu de type “fils de suckerfish”. Je voudrais simuler ce que fait hoverIntent sans append le poids supplémentaire de JS. Je préférerais traiter cela comme une amélioration progressive et ne pas faire de JS une exigence pour utiliser le menu.

Actualisé

Voici le code final … http://jsfiddle.net/aEgV3/

Merci pour votre aide!

Eh bien .. vous pouvez utiliser des transitions pour retarder l’effet :hover , si l’effet est basé sur CSS.

Par exemple

 div{ transition: 0s background-color; } div:hover{ background-color:red; transition-delay:1s; }

Cela retardera l’application des effets de survol ( background-color dans ce cas ) pendant une seconde.

Démonstration de retard sur les deux survoleurs à l’ adresse http://dabblet.com/gist/1498443

Démonstration du délai uniquement en survol sur http://dabblet.com/gist/1498446

Extensions spécifiques aux fournisseurs pour les transitions et les transitions CSS3 du W3C

 div { background: #dbdbdb; -webkit-transition: .5s all; -webkit-transition-delay: 5s; -moz-transition: .5s all; -moz-transition-delay: 5s; -ms-transition: .5s all; -ms-transition-delay: 5s; -o-transition: .5s all; -o-transition-delay: 5s; transition: .5s all; transition-delay: 5s; } div:hover { background:#5AC900; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; }

Cela appenda un délai de transition, qui sera applicable à presque tous les navigateurs.

Pour un aspect plus esthétique 🙂 peut être:

 left:-9999em; top:-9999em;

position pour .sNv2 .nav UL peut être remplacée par z-index:-1 et z-index:1 pour .sNv2 .nav LI:Hover UL