jQuery中hover與mouseover和mouseout的區別分析_jquery

本文實例分析了jQuery中hover與mouseover和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程式設計有所幫助。