css - 悬停时隐藏绝对定位的div

Question

我有这个 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;
}

Answer 1

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

.caption:hover {
    display: none; /* HERE */
}

只是默认情况下您的 div 是隐藏的。