css - google - header html example

Retardo: desplázate en CSS3?

Question

¿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!

Answer 1

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

Answer 2

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

Answer 3

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.