CSS: Prevenire che una proprietà abbia effetto sull'elemento fino alla fine della transizione

Question

Abbiamo alcune caselle per mostrare alcuni dati al passaggio del mouse. Quindi, quando spostiamo il mouse su un elemento, esso dovrebbe espandersi, entrare di fronte ad altri elementi e mostrare i dati nascosti.

ho fatto qualcosa di simile:

box:hover { 
    z-index: 50; 
} 

Ma c'è un problema; Quando spostiamo il mouse su un altro spazio bianco esterno, lo z-index torna al valore, come gli altri. Quindi è visibile che l'elemento in bilico si trova nello strato inferiore rispetto al prossimo.

Come impedire a una proprietà di applicare, fino alla fine della transizione?

Ecco il mio jsFiddle. Prova a passare il mouse su un elemento, sposta il mouse fuori dall'elemento e l'immagine di sfondo di altri elementi si troverà davanti al nostro elemento al passaggio del mouse prima della fine della transizione.

Aggiornamento: questa è la schermata del problema. Questo è quando scopriamo l'elemento. background-image di altri elementi si presentano di fronte al nostro elemento stazionario.

Answer 1

aggiungere una transizione anche per z-index, ma inserire un ritardo solo quando .box è in stato normale.

In questo modo il z-index cambierà istantly al passaggio del mouse, mentre l'azione opposta (“unhover”) il z-index avrà il suo valore iniziale, ma solo dopo 0.5 secondi (la durata del vostro effetto espansione è 0.4 secondi)

.box { 
    ... 
    z-index: 1; 
    -webkit-transition: z-index 0s .5s; 
     -moz-transition: z-index 0s .5s; 
      transition: z-index 0s .5s; 
} 

.box:hover { 
    -webkit-transition: z-index 0s 0s; 
     -moz-transition: z-index 0s 0s; 
      transition: z-index 0s 0s; 
    z-index: 50; 
} 

esempio: http://jsfiddle.net/yjg2oach/

Answer 2

Aggiungi un attributo di transizione al tuo .box gruppo.

.box { 
    float: left; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    margin-bottom: 35px; 
     transition: .4s; 
} 

fisso fiddle