無法使用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/