jQuery中hover與mouseover與mouseenter的區別

以前一直以為在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

這2個是有區別的。
hover是指分別當滑鼠指標進入和離開元素時被執行的事件相當於mouseenter+mouseleave。而mouseover滑鼠進入某個元素或其子元素時觸發。
可參考mouseover和mouseenter的區別：http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover

mouseover事件與mouseenter事件的區別

不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。對應mouseout
只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。對應mouseleave

這樣的話，mouseenter子元素不會反覆觸發事件，否則在IE中經常有閃爍情況發生。