我如何更改css3延遲的子div的zindex

Question

css3轉換延遲僅在一段時間後纔開始動畫。沒關係。但動畫只與它有關。

當鼠標懸停在2秒後，我們可以更改子div的z-index嗎？

我所做的事情：

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