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;
}

h2更新：不透明度を使用しても、子要素（および）は非表示になりませんp。CSSだけでそれらすべてを非表示にするにはどうすればよいですか？

4

2 に答える 2

4

表示されていない場合は、ホバーできません。代わりに、その不透明度プロパティを使用する必要があります。

フィドル： http： //jsfiddle.net/2nEVW/

于 2012-09-05T17:19:55.337 に答える
0

前述のように、次のように div タグに Opacity を使用できます: http://jsfiddle.net/xGQ26/2/

于 2012-09-05T17:35:57.603 に答える