css - 无法使用 css 在列表项中设置叠加层

Question

我正在处理这个网格库，其中列表项的宽度设置为 20%，这样它们就可以像使用左浮动的一行中的 5 个一样。现在我正在使用一个带有类叠加层的 div，这样当有人将鼠标悬停在 Li 上时，就会显示叠加层。问题是当我给覆盖 100% 宽度和高度 100% 它覆盖整个屏幕，而不仅仅是那个李。这是我的 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

您需要添加位置：相对于 li 项目，覆盖中的绝对定位将以此为参考。

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

您还需要添加一个 display: none 到覆盖层和一个悬停在 li 上以更改 display: none 到 display: 覆盖层上的块，如下所示：

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

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