CSS: Verhindern, dass eine Eigenschaft Auswirkungen auf das Element bis zum Ende des Übergangs hat

Question

Wir haben einige Felder, um einige Daten zum Hover anzuzeigen. Wenn wir also die Maus über ein Element bewegen, sollte es sich erweitern, vor andere Elemente treten und die versteckten Daten anzeigen.

Ich habe so etwas wie dies:

box:hover { 
    z-index: 50; 
} 

Aber es gibt ein Problem; Wenn wir die Maus auf einen anderen äußeren Leerraum bewegen, wird der z-index wieder auf den Wert zurückgesetzt, wie bei anderen auch. Es ist also sichtbar, dass das Element schweben in der unteren Ebene liegt.

Wie kann verhindert werden, dass eine Eigenschaft bis zum Ende des Übergangs angewendet wird?

Hier ist meine jsFiddle. Versuchen Sie, auf einem Element zu schweben, bewegen Sie die Maus aus dem Element heraus und das Hintergrundbild anderer Elemente wird vor dem Ende des Übergangs vor unserem Element mit dem Schweben liegen.

Update: Dies ist der Screenshot des Problems. Dies ist der Zeitpunkt, an dem wir uns von Elementen lösen. background-image eines anderen Elements kommen vor unserem schwebenden Element.

Answer 1

einen Übergang hinzufügen auch für z-index, aber nur eine Verzögerung einzufügen, wenn .box im Normalzustand ist.

Doing so die z-index wird istantly auf schweben ändern, während auf der gegenüberliegenden Aktion („unhover“) die z-index seinen Anfangswert nehmen, sondern erst nach 0.5 Sekunden (die Dauer der expandierenden Wirkung sind 0.4 Sekunden)

.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; 
} 

Beispiel: http://jsfiddle.net/yjg2oach/

Answer 2

einen Übergang Attribut auf Ihre .box Gruppe hinzufügen.

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

Fixe fiddle