css转换的问题

Question

我正在尝试设置一个简单的css过渡，其中项目上有一个蒙版，当用户将鼠标悬停在项目上时，蒙版不透明度变为0并且项目完全可见。我遇到的问题是当我将面具放在项目中时，例如：

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

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

蒙版向下移动到另一个元素。因此，例如，来自“home”磁贴的掩码向下移动到about tile，并且来自“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/