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はデフォルトで隠されていました。

Answer 2

試してみてください

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

    .caption:hover {
        display: none;
    }

Answer 3

これを変更してみてください：

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

.caption:hover {
    display: none;
}

div は display:block である必要があるため、カーソルを合わせると、display:none になる可能性があります

Answer 4

chrome と FireFox で CSS を確認してみましたが、クロスブラウザ対応ではないようです。ホバー時に非表示にするjavascriptを書いてみませんか..

フィドル