微客导航 » 文章资讯 » jQuery实现鼠标移入显示蒙版效果

jQuery实现鼠标移入显示蒙版效果

2023-08-03 06:10:07 330

本文实例为大家分享了jQuery鼠标移入显示蒙版的具体代码，供大家参考，具体内容如下

效果展示：

具体代码：




摄影小白成长记
Thebestpreparationfortomorrowisdoingyourbesttoday.


点击查看更多

点击查看更多

#fourth_tabli{
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_morea{
text-decoration:none;
color:#fbfff9;
}

$('#fourth_tabli').mouseenter(function(){
$(this).find('.show_more').slideDown(200);
});

$('#fourth_tabli').mouseleave(function(){
$(this).find('.show_more').slideUp(200);
});

个人笔记：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现鼠标移入显示蒙版效果

热门推荐

随机推荐