FrontEnd 步步高升:鼠标在图片上,产生遮盖效果

思路:

在图片旁边放一个height:0px的DIV,,让jQuery改变高度,产生动画

DOM树

<div class="mask col-sm-2 col-md-2"><a href="#"><img src="img/hd-7.jpg" alt="活动图片"></a><div class="mask-text"><div class="mask-header"><a href="#">活动标题</a></div><p>活动介绍…..</p></div></div>

JAVASCRIPT:

$(".mask").hover(function () {$(".mask-text", this).stop().animate({height: "100%"});},function () {$(".mask-text", this).stop().animate({height: "0px"});});

正确的寒暄必须在短短一句话中明显地表露出你对他的关怀。

FrontEnd 步步高升:鼠标在图片上,产生遮盖效果

相关文章:

你感兴趣的文章:

标签云: