Html 使用可见性属性悬停时图像上的文本？

正在努力添加一个简单的图像描述/文本框，当图像悬停时会显示在图像上方

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

我原以为在悬停状态下简单地使用visibility:hidden和visibility:visibility是可行的，但现在还没有出现

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

缩略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>

#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;
}

---

调用

：将
悬停在
li
上，而不是
span
上，并将
span
作为目标

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


同时删除
在该悬停语句上：

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

#画廊ul li span：悬停；尝试删除
在
之后#画廊ul li span:悬停
。当然。我在盘旋李，而不是跨度。谢谢您。