jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了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程序设计有所帮助。
- 使用jquery给新生的th绑定hover事件的实例
- 浅谈jQuery hover(over, out)事件函数
- jQuery hover事件简单实现同时绑定2个方法
- jquery中取消和绑定hover事件的实现代码
- jQuery实现的文字hover颜色渐变效果实例
- jQuery实现hover合成事件的方法
- jQuery中hover方法和toggle方法使用指南
- JQuery中使用on方法绑定hover事件实例
- jquery中的常用事件bind、hover、toggle等示例介绍
- jQuery中多个元素的Hover事件解决方案
- jQuery 鼠标经过(hover)事件的延时处理示例
- jQuery的live()方法对hover事件的处理示例
- jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
相关文章
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
大牛ppk都说过,在从多表单控件中,上传文件控件的样式是最难以控制的。见文章Styling an input type="file"。本插件也多是参考此文2011-10-10jQuery Autocomplete简介_动力节点Java学院整理
这篇文章主要介绍了jQuery Autocomplete简介,jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大、最灵活的Autocomplete,它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据2017-07-07
最新评论