jQuery中hover與mouseover和mouseout的區(qū)別分析
本文實(shí)例分析了jQuery中hover與mouseover和mouseout的區(qū)別。分享給大家供大家參考，具體如下：
以前一直以為在jquery中其實(shí)mouseover和mouseout兩個(gè)事件等于hover事件。兩個(gè)沒(méi)什么區(qū)別，應(yīng)該是一樣的。但昨天一個(gè)動(dòng)畫(huà)效果才讓我見(jiàn)識(shí)了，這兩個(gè)并不能等同。
<div class="wrapper"> <div class="img"></div> <div class="text"></div> </div> <div class="point"></div>
在wrapper上加事件，當(dāng)鼠標(biāo)移動(dòng)到wrapper上的時(shí)候讓class="point"的層放大。但如果用mouseover和mouseout事件的話，當(dāng)鼠標(biāo)移動(dòng)到wrapper層后，point層會(huì)變大，但當(dāng)鼠標(biāo)在img和text層之間進(jìn)行移動(dòng)的時(shí)候，point層會(huì)變大變小，不停的變化。這并不是我們想要的結(jié)果，我們想要的是只要鼠標(biāo)在wrapper層上，無(wú)論是img還是text上，point就變大，但在鼠標(biāo)未移出wrapper層的情況下，point層不變小。
慢慢思路也清晰了，我們不用mouseover和mouseout而用hover問(wèn)題就解決了。
這么簡(jiǎn)單的問(wèn)題我們竟然花了好長(zhǎng)時(shí)間才解決，真是夸張。寫(xiě)篇以作紀(jì)念。
補(bǔ)充：后來(lái)我?guī)煾刚f(shuō)其實(shí)在jquery源碼中有這么一段：
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}
也就是說(shuō)hover！=mouseover+mouseout。但hover=mouseenter+mouseleave。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 使用jquery給新生的th綁定hover事件的實(shí)例
- 淺談jQuery hover(over, out)事件函數(shù)
- jQuery hover事件簡(jiǎn)單實(shí)現(xiàn)同時(shí)綁定2個(gè)方法
- jquery中取消和綁定hover事件的實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)的文字hover顏色漸變效果實(shí)例
- jQuery實(shí)現(xiàn)hover合成事件的方法
- jQuery中hover方法和toggle方法使用指南
- JQuery中使用on方法綁定hover事件實(shí)例
- jquery中的常用事件bind、hover、toggle等示例介紹
- jQuery中多個(gè)元素的Hover事件解決方案
- jQuery 鼠標(biāo)經(jīng)過(guò)(hover)事件的延時(shí)處理示例
- jQuery的live()方法對(duì)hover事件的處理示例
- jquery hover 不停閃動(dòng)問(wèn)題的解決方法(亦為stop()的使用)
相關(guān)文章
這篇文章主要介紹了jQuery中width()方法用法,以實(shí)例形式較為詳細(xì)的分析了width()方法獲取元素寬度的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
因?yàn)橐o新員工進(jìn)行培訓(xùn)jQuery.UI方面的內(nèi)容，我之前學(xué)習(xí)的都是jquery.ui-1.6b的，現(xiàn)在的版本升級(jí)到j(luò)query-ui-1.7.1，除了樣式上有很大調(diào)整以外，API也有了很大的變化。2009-08-08
jquery.fileEveryWhere.js 一個(gè)跨瀏覽器的file顯示插件
大牛ppk都說(shuō)過(guò)，在從多表單控件中，上傳文件控件的樣式是最難以控制的。見(jiàn)文章Styling an input type="file"。本插件也多是參考此文2011-10-10
jQuery打字效果實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery打字效果實(shí)現(xiàn)方法,詳細(xì)分析了jQuery實(shí)現(xiàn)打字效果所涉及的jticker_split.js插件機(jī)具體調(diào)用技巧,并附帶完整的demo源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
根據(jù)jquery的注釋，其是匹配HTML字符串和ID選擇器2011-08-08
jQuery移除元素自動(dòng)解綁事件實(shí)現(xiàn)思路及代碼
用jQuery將元素移除的基本方法常用的有三個(gè)，一個(gè)是remove()方法，一個(gè)是html()方法，一個(gè)是empty()方法2014-05-05
這篇文章主要介紹了jQuery操作JSON的CRUD用法,實(shí)例分析了jQuery進(jìn)行CURD的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
jQuery Autocomplete簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了jQuery Autocomplete簡(jiǎn)介，jQuery UI Autocomplete是jQuery UI的自動(dòng)完成組件，是我用過(guò)的最強(qiáng)大、最靈活的Autocomplete，它支持本地的Array/JSON數(shù)組、通過(guò)ajax請(qǐng)求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來(lái)獲取數(shù)據(jù)2017-07-07
基于jquery創(chuàng)建的一個(gè)圖片、視頻緩沖的效果樣式插件
利用css和jquery創(chuàng)建一個(gè)動(dòng)畫(huà)效果的緩沖樣式插件，插件可以開(kāi)始、暫停、結(jié)束2012-08-08
jquery 查找iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼
jquery 查找iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2011-08-08