jQuery中hover与mouseover和mouseout的区别分析


Posted in Javascript onDecember 24, 2015

本文实例分析了jQuery中hover与mouseover和mouseout的区别。分享给大家供大家参考,具体如下:

以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件。两个没什么区别,应该是一样的。但昨天一个动画效果才让我见识了,这两个并不能等同。

<div class="wrapper">
<div class="img"></div>
<div class="text"></div>
</div>
<div class="point"></div>

在wrapper上加事件,当鼠标移动到wrapper上的时候让class="point"的层放大。但如果用mouseover和mouseout事件的话,当鼠标移动到wrapper层后,point层会变大,但当鼠标在img和text层之间进行移动的时候,point层会变大变小,不停的变化。这并不是我们想要的结果,我们想要的是只要鼠标在wrapper层上,无论是img还是text上,point就变大,但在鼠标未移出wrapper层的情况下,point层不变小。

慢慢思路也清晰了,我们不用mouseover和mouseout而用hover问题就解决了。

这么简单的问题我们竟然花了好长时间才解决,真是夸张。写篇以作纪念。

补充:后来我师父说其实在jquery源码中有这么一段:

hover: function( fnOver, fnOut ) {
 return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

也就是说hover!=mouseover+mouseout。但hover=mouseenter+mouseleave。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
javascript代码加载优化方法
Jan 30 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
基于JS2Image实现圣诞树代码
Dec 24 #Javascript
jquery读写cookie操作实例分析
Dec 24 #Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 #Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 #Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 #Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 #Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
深入PHP数据加密详解
2013/06/18 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
python实现dict版图遍历示例
2014/02/19 Python
python通过post提交数据的方法
2015/05/06 Python
Python中内建函数的简单用法说明
2016/05/05 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
深入理解python中的select模块
2017/04/23 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python必须了解的35个关键词
2020/07/16 Python
Python __slots__的使用方法
2020/11/15 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
小学生家长寄语
2014/04/02 职场文书
委托书如何写
2014/08/30 职场文书
土建技术员岗位职责
2015/04/11 职场文书
我是特种兵观后感
2015/06/11 职场文书
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript