使用可见性属性悬停在图像上的文字？

Question

正在添加一个简单的图像 description/text-box 悬停在图像上时出现。

当我不担心悬停而只是将可见性切换为在我的跨度上可见时，这正是我正在寻找的。

我原以为只要在悬停状态下使用 visibility:hidden 和 visibility:visible 就可以了，但没有出现。

我想我的定位有问题，但我显然忽略了一些东西，可能已经盯着它看太久了。

精简 HTML：

<div id="gallery">
    <ul>
        <li>
        <a href="full-size-image.jpg"><img src="tumbnail.jpg"/>
        <span class="image-caption">Image Caption Text</span></a>
        </li>

        <li>
        <a href="full-size-image.jpg"><img src="tumbnail.jpg"/>
        <span class="image-caption">Image Caption Text</span></a>
        </li>
    </ul>
</div>

删节的 CSS：

#gallery {
    width:100%;
    margin:auto;
}
#gallery ul {
    list-style:none;
    margin:0;
    padding:0;
}
#gallery ul li {
    display:inline;
    position:relative;
    margin:0;
    padding:0;
}
#gallery ul li span {
    visibility:hidden;
    position:absolute;
    width:100%;
    left:0;
    bottom:0px;
    z-index:3;
    background:rgba(0,0,0,.6);
    color:#FFF;
    text-align:center;
}
#gallery ul li span:hover {
    visibility: visible;
}

Answer 1

在 li 上调用 :hover 而不是 span 并定位 span

#gallery ul li:hover span {
    visibility:visible;
}

FIDDLE

同时删除悬停语句中的 ;：

#gallery ul li span:hover; <---- {

使用可见性属性悬停在图像上的文字？

Text over image on hover using visibility attribute?

html

css