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/