首頁 > web前端 > js教程 > 主體

jQuery事件mouseover與mouseout與hover的差別

黄舟
發布: 2017-06-28 13:34:31
原創
1351 人瀏覽過

才不久想模仿淘寶和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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!