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

Question

努力在图像悬停时添加简单的图像描述/文本框出现在图像上。

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

我原以为在悬停状态下简单地使用 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; <---- {