无法使用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; 
} 

你也需要添加一个显示：none来覆盖和李是改变显示悬停：无显示：块上的叠加，就像这样：

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

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