jQuery中hover与mouseover和mouseout的区别分析
2015-12-24 00:00
871 查看
本文实例分析了jQuery中hover与mouseover和mouseout的区别。分享给大家供大家参考,具体如下:
以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件。两个没什么区别,应该是一样的。但昨天一个动画效果才让我见识了,这两个并不能等同。
在wrapper上加事件,当鼠标移动到wrapper上的时候让class="point"的层放大。但如果用mouseover和mouseout事件的话,当鼠标移动到wrapper层后,point层会变大,但当鼠标在img和text层之间进行移动的时候,point层会变大变小,不停的变化。这并不是我们想要的结果,我们想要的是只要鼠标在wrapper层上,无论是img还是text上,point就变大,但在鼠标未移出wrapper层的情况下,point层不变小。
慢慢思路也清晰了,我们不用mouseover和mouseout而用hover问题就解决了。
这么简单的问题我们竟然花了好长时间才解决,真是夸张。写篇以作纪念。
补充:后来我师父说其实在jquery源码中有这么一段:
也就是说hover!=mouseover+mouseout。但hover=mouseenter+mouseleave。
希望本文所述对大家jQuery程序设计有所帮助。
jQuery中hover方法和toggle方法使用指南
jquery中的常用事件bind、hover、toggle等示例介绍
jQuery的live()方法对hover事件的处理示例
jQuery中mouseover事件用法实例
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
jquery中的mouseleave和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实现hover合成事件的方法jQuery中hover方法和toggle方法使用指南
jquery中的常用事件bind、hover、toggle等示例介绍
jQuery的live()方法对hover事件的处理示例
jQuery中mouseover事件用法实例
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
相关文章推荐
- javascript与jquery中的this关键字用法实例分析
- jQuery的编写原则
- 使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表
- jsp jquery 页面中select显示加载后的数据默认选中项
- JQuery 特效
- jQuery小技巧(三)
- jquery的height()和javascript的height总结,js获取屏幕高度
- ASP.NET jquery-1.9.1 语句
- 深入理解jQuery插件开发
- 学习笔记:《jQuery基础教程》第四版第六章课后练习——通过Ajax发送数据
- jQuery获取属性之自己遇到的问题
- jquery中eq和get (
- javascript/jquery判断是否为undefined或是null!
- jQuery获取和设置disabled属性、背景图片路径
- 20151223jquery学习笔记--Ajax表单提交
- jQuery 插件--jQuery.timers
- jquery wrap()方法
- 改进jQuery的$.getScript(url,callback)动态加载JS
- JQuery分页插件bs_pagination的应用
- JQuery选择器大全