Retard: Hover dans CSS3?
Existe-t-il un moyen de retarder l'événement :Hover sans utiliser javascript? Je sais qu'il existe un moyen de retarder les animations, mais je n'ai rien vu sur le retard de l'événement :Hover.
Édité...
Désolé, j'aurais dû inclure ceci pour commencer... Je construis un menu de type fils de suckerfish. Je voudrais simuler ce que fait hoverIntent sans ajouter le poids js supplémentaire. Je préférerais traiter cela comme une amélioration progressive et ne pas faire DE JS une exigence pour utiliser le menu.
Mise à Jour
Voici le code final... http://jsfiddle.net/aEgV3/
Merci pour toute l'aide!
3 réponses
Eh bien.. vous pouvez utiliser des transitions pour retarder l'effet :hover souhaité, 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 hover sur et en dehors à http://dabblet.com/gist/1498443
Démonstration de retard seulement sur le vol stationnaire à http://dabblet.com/gist/1498446
Extensions spécifiques au fournisseur pour Transitions et transitions CSS3 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 ajoutera 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é par z-index:-1 et z-index:1 pour .sNv2 .nav LI:Hover UL