jQuery事件mouseover与mouseout与hover的区别
程序员文章站
2022-03-17 08:08:20
...
才不久想模仿淘宝和qq空间最上面那种书包滑上去就显示一个下拉菜单的效果,结果发现在ie6下面鼠标在div里面移动会不停的出发mouseover事件,正纳闷,在网上找到这篇文章,其实在api里面也有解释,只是没看到,相信有同样问题的朋友看了这篇文章也会有所启发的
以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件。两个没什么区别,应该是一样的。但昨天一个动画效果才让我见识了,这两个并不能等同。
以前一直以为在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事件mouseover与mouseout与hover的区别的详细内容,更多请关注其它相关文章!
推荐阅读
-
jQuery中的on与bind绑定事件区别实例详解
-
jquery中$(#form :input)与$(#form input)的区别
-
jquery append()方法教程与html()方法教程的区别及使用介绍
-
oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
-
Jquery中的prop()、data()与attr()区别详解
-
jQuery AJAX与jQuery事件的分析讲解
-
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
-
jQuery中bind与live的用法及区别小结
-
jQuery中delegate和on的用法与区别详细解析
-
JQuery与JS里submit()的区别示例介绍