1

我只想在鼠标悬停在他上方时显示一个 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;
}

更新:如果我使用 opacity 它不会隐藏子元素 -h2p. 如何仅使用 CSS 隐藏所有这些?

4

2 回答 2

4

如果未显示,则无法将其悬停。您应该改用它的opacity 属性

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

于 2012-09-05T17:19:55.337 回答
0

如前所述,您可以将 Opacity 用于 div 标签,如下所示:http: //jsfiddle.net/xGQ26/2/

于 2012-09-05T17:35:57.603 回答