jQuery hover 与 mouseover 与mouseout 的区别

jQuery hover 与 mouseover 与mouseout 的区别

本帖最后由 jianghejie 于 2012-3-17 13:45 编辑

才不久想模仿淘宝和qq空间最上面那种书包滑上去就显示一个下拉菜单的效果，结果发现在ie6下面鼠标在div里面移动会不停的出发mouseover事件，正纳闷，在网上找到这篇文章，其实在api里面也有解释，只是没看到，相信有同样问题的朋友看了这篇文章也会有所启发的
以前一直以为在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。

http://www.jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0308/24.html