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)畫效果才讓我見(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í)間才解決，真是夸張。寫篇以作紀(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實(shí)現(xiàn)美觀的多級(jí)動(dòng)畫效果菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級(jí)動(dòng)畫效果菜單代碼,涉及jquery針對(duì)頁(yè)面元素的遍歷及事件綁定操作頁(yè)面元素樣式變換的技巧,界面美觀實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JQuery 動(dòng)畫卷頁(yè) 返回頂部 動(dòng)畫特效(兼容Chrome)
JQuery 動(dòng)畫卷頁(yè) 返回頂部 動(dòng)畫特效(兼容Chrome) ,學(xué)習(xí)jquery的朋友可以測(cè)試下。2010-02-02
jquery插件lazyload.js延遲加載圖片的使用方法
lazyload.js是一個(gè)基于JQuery的插件，可以用來(lái)緩沖加載圖片。下面介紹這個(gè)插件的使用方法2014-02-02
jQuery實(shí)現(xiàn)有動(dòng)畫淡出效果的二級(jí)折疊菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)有動(dòng)畫淡出效果的二級(jí)折疊菜單代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
BootStrap glyphicon圖標(biāo)無(wú)法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范，則可能會(huì)導(dǎo)致bootstrap 在顯示glyphicon圖標(biāo)時(shí)無(wú)法正常顯示，顯示為方框。該怎么解決呢？下面小編給大家解答下2016-09-09
基于jQuery實(shí)現(xiàn)自動(dòng)輪播旋轉(zhuǎn)木馬特效
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)自動(dòng)輪播旋轉(zhuǎn)木馬特效，圖片輪播效果特別適合做產(chǎn)品展示，感興趣的小伙伴可以參考下。2015-11-11
jquery 綁定回車動(dòng)作撲捉回車鍵觸發(fā)的事件
這篇文章主要介紹了jquery如何撲捉回車鍵觸發(fā)的事件,需要的朋友可以參考下2014-03-03
jquery 表格分頁(yè)等操作實(shí)現(xiàn)代碼(pagedown，pageup)
jquery實(shí)現(xiàn)支持pagedown，pageup對(duì)表格進(jìn)行操作的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航，代碼實(shí)現(xiàn)效果簡(jiǎn)單精致，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jquery easyui validatebox remote的使用詳解
下面小編就為大家?guī)?lái)一篇jquery easyui validatebox remote的使用詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11