顯示懸停絕對定位的div不起作用

Question

我想只顯示一個div時，鼠標上方徘徊他，我有這個網站：

<div class="caption"> 
    <h2><a href="single-image.html">Sun Flower</a></h2> 
    <p class="meta-info-font">I took this photo at some bla bla bla.. and some other stuff.</p> 
</div> 

爲什麼不這項工作：

.caption { 
    position: absolute; 
    top: 40%; 
    left: 0; 
    right: 0; 
    background-color: rgba(20,19,19,0.94); 
    display: none; 
} 

.caption:hover { 
    display: block; 
} 

更新：如果我使用不透明度，它不會隱藏子元素 - h2和p。我如何只用CSS來隱藏它們？

Answer 1

如果沒有顯示，則無法將其懸停。您應該改用其opacity property。

小提琴：http://jsfiddle.net/2nEVW/

Answer 2

如前所述，您可以使用不透明度爲div標籤，像這樣： http://jsfiddle.net/xGQ26/2/