Ritardo: passa il mouse nei CSS3?

C’è un modo per ritardare l’evento: Hover senza usare javascript? So che c’è un modo per ritardare le animazioni, ma non ho visto nulla per ritardare l’evento: Hover.

Modificato…

Scusa, dovrei averlo incluso per cominciare … Sto costruendo un menu come il figlio di un suckerfish. Mi piacerebbe simulare cosa fa hoverIntent senza aggiungere il peso JS extra. Preferirei trattarlo come un miglioramento progressivo e non rendere JS un requisito per l’utilizzo del menu.

aggiornato

Ecco il codice finale … http://jsfiddle.net/aEgV3/

Grazie per tutto l’aiuto!

Bene .. puoi usare le transizioni per ritardare l’effetto :hover desiderato, se l’effetto è basato su CSS ..

Per esempio

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

questo ritarderà l’applicazione degli effetti al passaggio del mouse ( background-color in questo caso ) per un secondo.


Demo di ritardo su entrambi hover on e off su http://dabblet.com/gist/1498443

Demo di ritardo solo al passaggio del mouse su http://dabblet.com/gist/1498446


Estensioni specifiche del fornitore per transizioni e transizioni 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; } 

Questo aggiungerà un ritardo di transizione, che sarà applicabile a quasi tutti i browser.

Per un aspetto più estetico 🙂 può essere:

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

posizione per .sNv2 .nav UL può essere sostituito da z-index:-1 e z-index:1 per .sNv2 .nav LI:Hover UL