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