css过渡的问题答案

【问题标题】：Problems with css transitioncss过渡的问题
【发布时间】：2012-04-08 21:55:03
【问题描述】：

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

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

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

掩码向下移动到另一个元素。例如，“home”图块的蒙版向下移动到 about 图块，“about”图块的蒙版向下移动到之后的任何内容。我该如何解决？谢谢！

这里是这个的 js 小提琴：http://jsfiddle.net/5bL8H/

【问题讨论】：

【解决方案1】：

你可以很容易地用绝对内部相对的魔力做到这一点：

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

您还可以删除高度和宽度 - 右侧和底部的值会解决这个问题。

【讨论】：