使用順序消息懸停過渡延遲

Question

我試圖實現的是一個假的加載消息，因爲用戶在顯示實際的div內容之前懸停在div上。

.info { opacity: 0; width: 200px; height: 300px;transition-duration: 0.3s; transition-delay: 2s; margin-top: -20px; background-color: #000;} 

.info:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 2s; } 

.access {opacity: 0.0; transition-duration: 0.3s; transition-delay: 0.5s; background-color: #000; color: #fff} 
.access:hover { opacity: 1; transition-duration: 0.3s; transition-delay: 0.5s; } 

http://jsfiddle.net/499hM/

正如你可以看到，出現的消息，然後在div但該消息再次出現在DIV的頂部，並淡出出來 - 我要消失的消息，一旦div有「裝」。我希望這可以通過CSS來實現？

Answer 1

你可以使用相鄰的選擇器，並設置2個不同的孩子在你的boxe 2過渡。

.loading消息首先處於流動狀態，一旦展開，下一個孩子（+ .infos）將在稍後顯示。從那裏，.infos接管:hover保持在頂部。

DEMO：

http://codepen.io/gc-nomade/pen/jilLp

<div> 
    <p class="loading"> 
    loading ... 
    </p> 
    <p class="infos"> 
    Infos 
    </p> 
</div> 

div { 
    border:solid; 
    width:200px; 
    height:200px; 
    border:gray solid 5px; 
    margin:auto; 
    text-align:center; 
    position:relative; 
} 
.loading , .infos{ 
    position:absolute; 
    top:0; 
    left:0; 
    margin:0; 
    height:100%; 
    width:100%; 
    line-height:200px; 
    background:black; 
    color:white; 
    z-index:5; 
    opacity:0; 
} 
.infos { 
    z-index:0; 
    background:yellow; 
    line-height:1.2em;; 
    color:red; 
} 
.loading:hover { 
    opacity:1; 
} 
.loading:hover + .infos, .infos:hover { 
    opacity:1; 
    transition:2s 1s; 
    z-index:10; 
}