jQuery中hover與mouseover和mouseout的區(qū)別分析
本文實例分析了jQuery中hover與mouseover和mouseout的區(qū)別。分享給大家供大家參考,具體如下:
以前一直以為在jquery中其實mouseover和mouseout兩個事件等于hover事件。兩個沒什么區(qū)別,應(yīng)該是一樣的。但昨天一個動畫效果才讓我見識了,這兩個并不能等同。
<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層會變大變小,不停的變化。這并不是我們想要的結(jié)果,我們想要的是只要鼠標在wrapper層上,無論是img還是text上,point就變大,但在鼠標未移出wrapper層的情況下,point層不變小。
慢慢思路也清晰了,我們不用mouseover和mouseout而用hover問題就解決了。
這么簡單的問題我們竟然花了好長時間才解決,真是夸張。寫篇以作紀念。
補充:后來我?guī)煾刚f其實在jquery源碼中有這么一段:
hover: function( fnOver, fnOut ) { return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); }
也就是說hover!=mouseover+mouseout。但hover=mouseenter+mouseleave。
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- 使用jquery給新生的th綁定hover事件的實例
- 淺談jQuery hover(over, out)事件函數(shù)
- jQuery hover事件簡單實現(xiàn)同時綁定2個方法
- jquery中取消和綁定hover事件的實現(xiàn)代碼
- jQuery實現(xiàn)的文字hover顏色漸變效果實例
- jQuery實現(xiàn)hover合成事件的方法
- jQuery中hover方法和toggle方法使用指南
- JQuery中使用on方法綁定hover事件實例
- jquery中的常用事件bind、hover、toggle等示例介紹
- jQuery中多個元素的Hover事件解決方案
- jQuery 鼠標經(jīng)過(hover)事件的延時處理示例
- jQuery的live()方法對hover事件的處理示例
- jquery hover 不停閃動問題的解決方法(亦為stop()的使用)
相關(guān)文章
jquery.fileEveryWhere.js 一個跨瀏覽器的file顯示插件
大牛ppk都說過,在從多表單控件中,上傳文件控件的樣式是最難以控制的。見文章Styling an input type="file"。本插件也多是參考此文2011-10-10jQuery打字效果實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery打字效果實現(xiàn)方法,詳細分析了jQuery實現(xiàn)打字效果所涉及的jticker_split.js插件機具體調(diào)用技巧,并附帶完整的demo源碼供讀者下載參考,需要的朋友可以參考下2015-12-12jQuery Autocomplete簡介_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了jQuery Autocomplete簡介,jQuery UI Autocomplete是jQuery UI的自動完成組件,是我用過的最強大、最靈活的Autocomplete,它支持本地的Array/JSON數(shù)組、通過ajax請求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來獲取數(shù)據(jù)2017-07-07基于jquery創(chuàng)建的一個圖片、視頻緩沖的效果樣式插件
利用css和jquery創(chuàng)建一個動畫效果的緩沖樣式插件,插件可以開始、暫停、結(jié)束2012-08-08jquery 查找iframe父級頁面元素的實現(xiàn)代碼
jquery 查找iframe父級頁面元素的實現(xiàn)代碼,學(xué)習(xí)jquery的朋友可以參考下。2011-08-08