strong google example bootstrap css css3 hover delay

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.