Desidero applicare il ritardo all'uscita del mouse in css

Question

Sto tentando di applicare un ritardo prima di avviare una transizione CSS all'evento di uscita del mouse. Il mio codice CSS è al di sotto, per favore fatemi sapere come applicare il ritardo prima che la transizione CSS inizi il mouse.

Voglio ottenere che il menu rimanga stabile per un po 'di tempo (ad esempio per 3 secondi) dopo che l'utente sposta il puntatore del mouse fuori dal menu.

.timnav li .dropdown { 
    width: auto; 
    min-width: 0px; 
    max-width: 230px; 
    height: 0; 
    position: absolute; 
    overflow: hidden; 
    z-index: 999; 
    background:rgba(255, 255, 255, 0.8); 
    } 

.timnav li:hover .dropdown { 
    min-height: 60px; 
    max-height: 500px; 
    height: auto; 
    width: 100%; 
    padding: 0; 
      -webkit-transition: delay .5s ease-in-out; 
     -moz-transition: delay .5s ease-in-out; 
     -o-transition: delay .5s ease-in-out; 
} 

.timnav li .dropdown ul { 
    margin: 0; 
    margin-top:7px; 


} 

.timnav li .dropdown ul > li { 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 
    padding-bottom:2px; 
} 


    .timnav li .dropdown .dropdown2{ 
    display: none; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 
} 

    .timnav li .dropdown ul > li:hover .dropdown2{ 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 

} 

    .timnav li .dropdown .dropdown2:hover { 
    display: block; 
    width: 100%; 
    float: left; 
    text-align: left; 
    height: auto; 
    border-radius: none; 


} 


    .timnav li .dropdown .dropdown2 li a { 
    display: block; 
    padding-left:7px !important; 
    height:6 !important; 
    padding-top:8px; 
    background: url(../images/nav-bg.jpg) repeat; color:#fff; 

} 


.timnav li .dropdown ul > li a { 
    display: block; 
    line-height: 26px; 
    height: 22px; 
    padding: 10px; 
    background: url(../images/nav-crrent.jpg) repeat; color:#FFFFFF; 

} 

.timnav ul .dropdown ul li:first-child a { 
    border-radius: 0; 
} 

.timnav li .dropdown li a:hover { 
    background: url(../images/nav-bg.jpg) repeat; color:#000; 
} 

Answer 1

È possibile aggiungere un ritardo ad una transizione, la sintassi è la seguente:

transition: all 0.5s ease-in-out 3s; 

Così

transition: <property> <duration> <timing-function> <delay>; 

La sintassi è la stessa per tutti i prefissato versioni anche.

Ho creato una demo di questo, perché è necessario fare qualcosa di un po 'complicato per far apparire l'oggetto senza ritardo, ma ritardare prima che passi.

http://jsfiddle.net/pgqM2/

Il trucco è quello di ridefinire il passaggio per aggiungere il ritardo di 3s quando non c'è hover, ma per avere un ritardo 0s quando c'è un passaggio del mouse:

li ul { 
    opacity: 0; 
    transition: all 0.5s ease 3s; 
} 

li:hover ul { 
    opacity: 1; 
    transition: all 0.5s ease 0s; 
} 

Answer 2

C'è una proprietà transition-delay in CSS. Basta aggiungere questo al tuo codice e otterrai l'effetto desiderato.

transition-delay:3s; 

Ai fini della proprietà di transizione stenografia, ecco un quadro che riassume

Quindi nel tuo caso sarebbe simile a questa

div:hover { 
 
    -webkit-transition: .5s ease-in-out 3s; 
 
    -moz-transition: .5s ease-in-out 3s; 
 
    -o-transition: .5s ease-in-out 3s; 
 
    transition: .5s ease-in-out 3s; 
 
    color: red; 
 
    cursor: pointer; 
 
}

<div>Hover me. There is a delay!</div>

Ecco un fiddle per dimostrare

Answer 3

Puoi utilizzare la proprietà css3 transition-delay per ritardare l'esecuzione di css. Fai clic su "Provalo" per vedere un esempio.

Answer 4

Non è possibile utilizzare la transizione css quando si utilizza nessuno schermo, solo la soluzione con display nessuno è js.