css转换的问题

Question

我正在尝试设置一个简单的css转换，其中项目上有一个遮罩，当用户悬停在该项目上时，遮罩不透明度变为0，并且该项目完全可见。我遇到的问题是，当我把口罩放在物品中时，例如：

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

遮罩向下移动到另一个元素。例如，"主页"平铺的遮罩向下移动到about平铺，"about"平铺的掩码向下移动到后面的任何位置。我该如何解决这个问题？谢谢

这是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/