懸停在div（1）上以顯示div（2），如果mouseout繼續在x秒內顯示div（2）

Question

當我將鼠標懸停在圖像上時，div（2）出現。
但我希望div（2）即使在鼠標移出時也能保持約x秒。

我只想使用PURE CSS。 我該怎麼辦？

jsFiddle

#basarilar { 
 
    float: right; 
 
    margin: 7px 357px; 
 
    width: 140px; 
 
    height: 24px; 
 
    position: relative; 
 
    z-index: 9999; 
 
} 
 
.yildiz { 
 
    height: 24px; 
 
    width: 24px; 
 
    background: url("http://www.kelimelerbenim.com/wp-content/themes/kelimelerbenim/images/yildiz.png") 0 0 no-repeat; 
 
    margin-left: 10px; 
 
    float: right; 
 
    transition: .50s all; 
 
    transition-delay: 5s; 
 
} 
 
.yildiz:hover { 
 
    background: url("http://www.kelimelerbenim.com/wp-content/themes/kelimelerbenim/images/yildiz-2.png") 0 0 no-repeat; 
 
} 
 
.aciklama { 
 
    display: none; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 70px; 
 
    z-index: 9999; 
 
    top: 48px; 
 
    right: 0px; 
 
    padding: 15px 15px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
#bumerang1 { 
 
    color: #ffffff; 
 
    background: #76ab01; 
 
} 
 
#bumerang:hover + #bumerang1 { 
 
    display: block; 
 
} 
 
#bumerang1:hover { 
 
    display: block; 
 
}

<div id="basarilar"> 
 
    <div id="bumerang" class="yildiz"></div> 
 
    <div id="bumerang1" class="aciklama">This is my DIV</div> 
 
</div>

Answer 1

Christopher Pearson對於使用轉換延遲是正確的，但您還需要更改其他一些東西。

#basarilar { 
 
    float:right; 
 
    margin:7px 357px; 
 
    width: 140px; 
 
    height: 24px; 
 
    position: relative; 
 
    z-index: 9999; 
 
} 
 
.yildiz { 
 
    height:64px; 
 
    width:64px; 
 
    background:url("http://i.stack.imgur.com/vNQ2g.png?s=64&g=1") no-repeat; 
 
    margin-left:10px; 
 
    float:right; 
 
    transition: .50s all; 
 
    transition-delay: 5s; 
 
} 
 
.yildiz:hover { 
 
    background:url("http://i.stack.imgur.com/vNQ2g.png?s=64&g=1") 0 0 no-repeat; 
 
} 
 
.aciklama { 
 
    visibility: hidden; /* use visibility rather than display */ 
 
    position:absolute; 
 
    width: 200px; 
 
    height: 70px; 
 
    z-index: 9999; 
 
    top:48px; 
 
    right:0px; 
 
    padding: 15px 15px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    transition-delay: 3s; /* Set transition-delay to 3s, so the mouse out is delayed */ 
 
} 
 
#bumerang1 { 
 
    color:#ffffff; 
 
    background: #76ab01; 
 
} 
 
#bumerang:hover + #bumerang1 { 
 
    visibility: visible; /* use visibility rather than display */ 
 
    transition-delay: 0s; /* Set transition-delay to 0s, so the mouse over is still immediate */ 
 
} 
 
#bumerang1:hover { 
 
    display:block; 
 
}

<div id="basarilar"> 
 
    <div id="bumerang" class="yildiz"></div> 
 
    <div id="bumerang1" class="aciklama">This is my DIV</div> 
 
</div>

Answer 2

你將不得不使用的過渡與.transition-duration。有關類似的應用，請參閱this thread。您還可以看到W3學校轉換頁面here。