css - 无法使用 css 在列表项中设置覆盖

Question

我正在处理这个网格画廊，其中列表元素的宽度设置为 20%，这样它们就可以像 5 个一样排成一排，使用 float left。 现在我正在使用带有类覆盖的 div，这样当有人将鼠标悬停在 Li 上时，就会显示覆盖。 问题是 当我给 overlay 100% 的宽度和 100% 的高度时，它会覆盖整个屏幕，而不仅仅是那个 Li。 这是我的 HTML 代码

   <ul id="thumbsList">
    <li>
        <div class="overlay">Hello</div>
    </li>
    <li><div class="overlay">Hello2</div></li>
</ul>

这是我的CSS

#thumbsList {
    margin: 0px;
    padding: 0px;
}

#thumbsList li {
    list-style: none;
    float: left;
    height: 100px;
    width: 20%;
    background-color: gainsboro;
}

.overlay {
    text-align: center;
    z-index: 2;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: red;
}

请帮我解决这个问题。 谢谢。

Answer 1

需要添加position:相对于li item，overlay中的绝对定位以此为引用。

#thumbsList li {
    position: relative;
    list-style: none;
    float: left;
    height: 100px;
    width: 20%;
    background-color: gainsboro;
}

您还需要添加一个 display: none 到叠加层，并将鼠标悬停在 li 上以更改 display: none 到 display: 覆盖层上的 block ，如下所示:

#thumbsList li:hover .overlay {
    display: block;
}

演示:http://jsfiddle.net/HPJ8v/