Jquery鼠標(biāo)移入和移出、點(diǎn)擊事件,點(diǎn)擊變色，鼠標(biāo)移出又變回原來的樣式

你只要明白事件觸發(fā)的順序就知道原因了：當(dāng)你鼠標(biāo)移到div上的時候，觸發(fā)mouseenter事件，點(diǎn)擊的時候觸發(fā)click事件，然后鼠標(biāo)移走觸發(fā)mouseleave事件。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供平南企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站建設(shè)、H5建站、小程序制作等業(yè)務(wù)。10年已為平南眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

例如：var

test=0;

$("#div1").delegate("a",

"mouseenter",

function()

{

test=1;

}).delegate("a",

"mouseleave",

function()

{

test=2;

});

$("#div1").delegate("a",

"click",

function()

{

test=3;

});

當(dāng)你鼠標(biāo)移動到div上點(diǎn)擊之后鼠標(biāo)再移走，最后觸發(fā)的事件是mouseleave事件，此時test是2而不是三。你可以測試一下

JQUERY 鼠標(biāo)移動到某個圖標(biāo)上顯示對應(yīng)DIV

思路：

獲取移動2個元素

給第一個元素加上鼠標(biāo)移入移除事件，

當(dāng)鼠標(biāo)移入時，顯示div

當(dāng)鼠標(biāo)移除時，隱藏div

代碼：

head?lang="en"

meta?charset="UTF-8"

title/title

style

div?{width:?100px;?height:?100px;?background:?#ccc;}

#div2?{display:?none;}

/style

script?src="js/jquery-1.7.2.js"/script

/head

body

div?id="div1"/div

div?id="div2"/div

/body

script

function?over(){

if(!$("#div2").is(":visible")){

$("#div2").show();????//如果元素為隱藏,則將它顯現(xiàn)

}else{

$("#div2").hide();?????//如果元素為顯現(xiàn),則將其隱藏

}

}

$('#div1').hover(over,over)

/script

jquery中鼠標(biāo)移上和移開的動作是什么？

mouseover事件于用戶把鼠標(biāo)從一個元素移動到另外一個元素上時觸發(fā)，mouseout事件于用戶把鼠標(biāo)移出一個元素時觸發(fā)。\x0d\x0a下面為你詳細(xì)介紹下jquery中的鼠標(biāo)事件：\x0d\x0a(1):click事件：click事件于用戶在元素敲擊鼠標(biāo)左鍵，并在相同元素上松開左鍵時觸發(fā)；\x0d\x0a$('p').click(function(){\x0d\x0aalert('click function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(2):dbclick事件：dbclick事件在用戶完成迅速連續(xù)的兩次點(diǎn)擊之后觸發(fā)，雙擊的速度取決于操作系統(tǒng)的設(shè)置。一般雙擊事件在頁面中不經(jīng)常使用；\x0d\x0a$('p').dbclick(function(){\x0d\x0aalert('dbclick function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(3):mousedown事件：mousedown事件在用戶敲擊鼠標(biāo)鍵時觸發(fā)，跟keydown事件不一樣，該事件僅在按下鼠標(biāo)時觸發(fā)；\x0d\x0a$('p').mousedown(function(){\x0d\x0aalert('mousedown function is\x0d\x0arunning !');\x0d\x0a});\x0d\x0a(4):mouseup事件：mouseup事件在用戶松開鼠標(biāo)時觸發(fā)，如果在與按下鼠標(biāo)的元素相同元素上松開，那么click事件也會觸發(fā)；\x0d\x0a$('p').mouseup(function(){\x0d\x0aalert('mouseup function is running\x0d\x0a!');\x0d\x0a}).click(function(){\x0d\x0aalert('click\x0d\x0afunction is running too !');\x0d\x0a});\x0d\x0a(5):mouseover事件：mouseover事件于用戶把鼠標(biāo)從一個元素移動到另外一個元素上時觸發(fā)，如果需要知道來自那個元素可以使用，relatedTagrget屬性；\x0d\x0a(6):mouseout事件：mouseout事件于用戶把鼠標(biāo)移出一個元素時觸發(fā)，這包括從父元素移動到子元素上，或者使用鍵盤跳到元素上。

JQUERY鼠標(biāo)移動顯示相應(yīng)內(nèi)容

我猜會繼續(xù)提問

script?type="text/javascript"

var?t;

$('.same-name?span').animate({top:?"0px",?opacity:?"0"});

$('.same-name?i?img').hover(function(){

//ImgToggle($(this),true);

$(this).parent().parent().children("span").stop().animate({top:?"-16px",?opacity:?"1"})

},function(){

t=setTimeout("ImgToggle("+$(this).parent().parent().index()+")",400);

console.log($(this).parent().parent().index());

}

)

$('.same-name?span').hover(function(){clearTimeout(t)},function(){

$(this).stop().animate({top:?"0px",?opacity:?"0"});

})

function?ImgToggle(i){

$('.same-name').parent().children().eq(i).find('span').animate({top:?"0px",?opacity:?"0"});

}?

/script

網(wǎng)站標(biāo)題：jquery鼠標(biāo)移動,jquery鼠標(biāo)移動切換圖片
本文路徑：http://chinadenli.net/article4/dsgsioe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站營銷、自適應(yīng)網(wǎng)站、定制網(wǎng)站、企業(yè)建站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)