CSS: Zapobieganie wpływowi elementu na element do końca przejścia

Question

Mamy trochę okien, aby pokazać trochę danych po najechaniu myszą. Kiedy przesuniemy kursor myszy nad jeden element, powinien się rozwinąć, przed innymi elementami i pokazać ukryte dane.

zrobiłem coś takiego:

box:hover { 
    z-index: 50; 
} 

Ale jest jeden problem; Kiedy przesuniemy mysz na inną zewnętrzną białą przestrzeń, z-index powraca do wartości, tak jak inne. Widać więc, że ukryty element znajduje się w niższej warstwie niż następny.

Jak zapobiec przeniesieniu właściwości, do końca okresu przejściowego?

Oto mój numer jsFiddle. Postaraj się najechać na jeden element, usunąć mysz z elementu, a obraz tła innych elementów znajdzie się przed naszym zawieszonym elementem przed zakończeniem przejścia.

Aktualizacja: jest to zrzut ekranu przedstawiający problem. To jest, gdy odradzamy element. background-image innych elementów pojawia się przed naszym zawieszonym elementem.

Answer 1

dodać przejście również z-index, lecz wstawić tylko wtedy, gdy opóźnienie .box jest w stanie normalnym.

Robi więc z-index zmieni istantly przy aktywowaniu, natomiast po przeciwnej działania („unhover”) z-index zajmie jego wartość początkową, ale dopiero po 0.5 sekund (czas trwania efektu rozszerzającego jest 0.4 sekund)

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

przykład: http://jsfiddle.net/yjg2oach/

Answer 2

Dodaj atrybut przejścia do grupy .box.

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

Stałe fiddle