您现在的位置是:首页 > 文章详情

jQuery案例demo -- 鼠标移入显示蒙版

日期:2018-05-29点击:323

效果展示

img_50561e538538a6ca147b8b1f58aa7abb.png
效果展示.png

HTML代码:

<ul id="fourth_tab"> <li> <img src="img/camera_green.png" alt="绿色相机" class="camera"> <p class="title"><span>摄影小白成长记</span></p> <p>The best preparation for tomorrow is doing your best today.</p> </li> <li style="background-color: red"> <div class="show_more"><a href="html/test.html">点击查看更多</a></div> <img src="img/bus.webp" alt="公交车"> </li> <li style="background-color: red"> <div class="show_more"><a href="html/test.html">点击查看更多</a></div> <img src="img/life.png" alt="落叶"> </li> </ul> 

CSS代码:

#fourth_tab li{ position: relative; border-radius: 6px; } .show_more{ width: 100%; height: 100%; line-height: 230px; background-color: #9f594d; position: absolute; display: none; font-size: 22px; font-weight: bolder; letter-spacing: 4px; cursor: pointer; } .show_more a{ text-decoration: none; color: #fbfff9; } 

Javascript代码:

$('#fourth_tab li').mouseenter(function(){ $(this).find('.show_more').slideDown(200); }); $('#fourth_tab li').mouseleave(function(){ $(this).find('.show_more').slideUp(200); }); 

个人笔记:

1.这里主要使用到jQuery的slideUp()slideDown()函数
2.在js代码中,使用$(this)来做限制。鼠标移入第二张图片,那么这张图片上面显示蒙版,其他的图片不显示

原文链接:https://yq.aliyun.com/articles/637242
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章