本文實例分析了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。

?

轉載于:https://www.cnblogs.com/horanly/p/6644300.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的jQuery中hover与mouseover和mouseout的区别分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。