在悬停时显示绝对定位div不起作用

Question

我想只在鼠标悬停在他上方时显示div，我有这个html：

<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

如上所述，您可以使用Opacity作为div标签，如下所示： http://jsfiddle.net/xGQ26/2/