css - google - header html example
Retardo: desplázate en CSS3? (3)
¿Hay alguna manera de retrasar el evento: Hover sin usar javascript? Sé que hay una manera de retrasar las animaciones, pero no he visto nada sobre el retraso del evento: Hover.
Editado ...
Lo siento, debería haber incluido esto para empezar ... Estoy construyendo un menú como hijo de suckerfish. Me gustaría simular lo que hace hoverIntent sin agregar el peso extra JS. Preferiría tratar esto como una mejora progresiva y no convertir a JS en un requisito para usar el menú.
Actualizado
Aquí está el código final ... http://jsfiddle.net/aEgV3/
¡Gracias por toda la ayuda!
Para una apariencia más estética :) puede ser:
left:-9999em;
top:-9999em;
posición para .sNv2 .nav UL
puede ser reemplazado por z-index:-1
y z-index:1
para .sNv2 .nav LI:Hover UL
Bueno ... puedes usar transiciones para retrasar el :hover
efecto de :hover
que desees, si el efecto está basado en CSS.
Por ejemplo
div{
transition: 0s background-color;
}
div:hover{
background-color:red;
transition-delay:1s;
}
Esto retrasará la aplicación de los efectos de desplazamiento ( background-color
en este caso ) durante un segundo.
Demo de demora tanto para activar como desactivar en http://dabblet.com/gist/1498443
Demostración de demora solo al pasar el mouse sobre http://dabblet.com/gist/1498446
Extensiones específicas del proveedor para transiciones y transiciones W3C CSS3
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;
}
Esto agregará un retraso de transición, que se aplicará a casi todos los navegadores.