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


Posted in jQuery onJanuary 11, 2020

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

效果展示:

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

具体代码:

<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>
#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;
}
$('#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)来做限制。鼠标移入第二张图片,那么这张图片上面显示蒙版,其他的图片不显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
jQuery操作动画完整实例分析
Jan 10 #jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
初识PHP中的Swoole
2016/04/05 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
js window.open弹出新的网页窗口
2014/01/16 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
python实现各进制转换的总结大全
2017/06/18 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
高考自主招生自荐信
2013/10/20 职场文书
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
学生处主任岗位职责
2013/12/01 职场文书
重阳节登山活动方案
2014/02/03 职场文书
电子信息专业自荐书
2014/02/04 职场文书
文明村镇申报材料
2014/05/06 职场文书
护士个人年终总结
2015/02/13 职场文书
简历自我评价优缺点
2015/03/11 职场文书
社区国庆节活动总结
2015/03/23 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书