Как изменить zindex дочернего div с задержкой css3

Question

Задержка перехода css3 начинает анимацию только через некоторое время. все нормально. но анимация связана только с ним.

можно ли изменить z-индекс дочернего div после 2 секунд, когда на него нависает мышь?

Что я сделал:

<div class="parent"> 
<div class="front"></div> 
<div class="back"></div> 
</div> 

<style> 
.parent:hover .front{ 
    transition-delay:4s;  
    /* Safari */ 
    -webkit-transition-delay:4s; 
    z-index: -1; 
} 
</style> 

Answer 1

Эта версия должна работать во всех современных браузерах: http://jsfiddle.net/maximgladkov/aLEgJ/

HTML

<div class="parent"> 
    <div class="front"></div> 
    <div class="back"></div> 
</div> 

CSS

.parent .front { 
    z-index: 1; 
} 

.parent .back { 
    z-index: 0; 
} 

.parent:hover .front { 
    -webkit-transition-delay: 4s; 
    -moz-transition-delay: 4s; 
    -ms-transition-delay: 4s; 
    -o-transition-delay: 4s; 
    transition-delay: 4s; 

    z-index: -1; 
}