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 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
vue实现路由切换改变title功能
May 28 Javascript
JavaScript实现动态留言板
Mar 16 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
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
jquery实现简易验证插件封装
2020/09/13 jQuery
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python常用库大全及简要说明
2020/01/17 Python
Python多进程编程常用方法解析
2020/03/26 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
校友会欢迎辞
2014/01/13 职场文书
广告业务员岗位职责
2014/02/06 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
运动会100米加油稿
2015/07/21 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python