css轉換問題

Question

我正在嘗試設置一個簡單的css轉換，其中在項目上有一個遮罩，並且當用戶將鼠標懸停在該項目上時，遮罩不透明度將變爲0，並且該項目完全可見。我遇到的問題是，例如，當我將面罩放在物品中時，例如：

<div class="tile"> 
    Home 
    <div class="mask"></div> 
</div> 

<div class="tile"> 
    About 
    <div class="mask"></div> 
</div> 

面具向下移動到另一個元素。舉例來說，來自「家」瓦片的面具向下移動到大約瓦片，而來自「大約」瓦片的面具向下移動到之後的任何東西。我該如何解決？謝謝！

下面是這個JS提琴：http://jsfiddle.net/5bL8H/

Answer 1

您可以用絕對內部相對魔法做很容易：

.tile {position:relative;} 
.tile .mask {position:absolute;left:0;right:0;top:0;bottom:0;} 

您也可以刪除高度和寬度 - 正確的和最低值會照顧到這一點。

例如：http://jsfiddle.net/5bL8H/2/