才不久想模仿淘寶和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。
以上是jQuery事件mouseover與mouseout與hover的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!