javascript - 鼠标放上遮罩层从下面冒出如何实现？

Question

鼠标放上缓慢从下面跑出产品服务这一层的介绍，鼠标移走后消失

Answer 1

为什么一定要JavaScript呢？

http://jsfiddle.net/Gerhut/32jJ8/1/

Answer 2

http://jsfiddle.net/JerryZou/eBznc/

Answer 3

详见本文：http://blog.segmentfault.com/f2e/1190000000575112。不过，你这个不至于用到背景图啦。

demo：

http://jsfiddle.net/xmlovecss/N7HpU/

Answer 4

我给题主提供替一下我的思路：
1.overlay层（产品服务这一层）初始化时可以隐藏在父节点下。

<p class="father"> 相对定位并隐藏超出部分
    <img src=" " />
    <p class="overlay">产品服务</p> 绝对定位
</p>

2.鼠标移入时，先将overlay层显示，再将其top通过运动移动至指定地点。
3.当鼠标移出时再将overlay回到原状态

Answer 5

<p class="main">
    <img>
    <p class="mask"></p>
</p>

给最外层的p设置
.main{position:relative；}
.main：hover .mask{top:0;}
.mask{position:absolute;top:-height;transform:all .5s;}

Answer 6

每个答案都很好，用到不同方法，谢谢各位朋友的热心回答^_^