本文實例分析了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程序設計有所幫助。