在悬停时隐藏绝对定位的div

时间:2012-09-05 17:05:25

标签: css position hide

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

4 个答案:

答案 0 :(得分:3)

.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只是隐藏了。

答案 1 :(得分:0)

尝试

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

    .caption:hover {
        display: none;
    }

答案 2 :(得分:0)

尝试更改此内容:

.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,所以当你将它悬停在它上面时,它可以显示:none

答案 3 :(得分:0)

我尝试在chrome和FireFox中检查CSS,但它似乎与浏览器不兼容。为什么不写一些javascript哟隐藏它在悬停..

Fiddle