jquery on hover事件怎么寫

//on('第一個參數(shù)是事件名稱，如click，change等',?'第二個參數(shù)表示執(zhí)行的方法')

成都創(chuàng)新互聯(lián)業(yè)務包括：成品網(wǎng)站、企業(yè)產(chǎn)品展示型網(wǎng)站建設、品牌網(wǎng)站設計、電子商務型網(wǎng)站建設、成都外貿(mào)網(wǎng)站建設公司(多語言)、購物商城網(wǎng)站建設、定制開發(fā)、成都全網(wǎng)營銷推廣等。效率優(yōu)先，品質(zhì)保證，用心服務是我們的核心價值觀，我們將繼續(xù)以良好的信譽為基礎，秉承穩(wěn)固與發(fā)展、求實與創(chuàng)新的精神，為客戶提供更全面、更優(yōu)質(zhì)的互聯(lián)網(wǎng)服務！

$('body').on('click',?function(){

});

//查看更詳細的說明

//hover('第一個鼠標移動到某個元素執(zhí)行方法',?'第二個鼠標移開當前DOM節(jié)點后執(zhí)行方法')

$('body').hover(function(){

//鼠標移動到body上執(zhí)行

},?function(){

//鼠標移開body后執(zhí)行

});

//查看更詳細的說明

附上jquery中文API文檔，

jquery 中當鼠標被按下然后拖動,經(jīng)過一個元素,如何觸發(fā)這個元素綁定的懸浮事件呢

用h5的拖放事件。ondrag,ondragenter,ondragover,ondrop等。給你一個demo。記得自己加圖片。

!DOCTYPE?HTML

html

head

titleHTML5實現(xiàn)拖拽操作/title

meta?charset="utf-8"/

style

.album

{

border:?3px?dashed?#ccc;

float:?left;

margin:?10px;

min-height:?100px;

padding:?10px;

width:?220px;

}

/style

/head

body

div?id="info"

h2溫馨提示：可將照片直接拖到垃圾箱中/h2

/div

div?id="album"?class="album"

h2相冊/h2

img?draggable="true"?id="img1"?src="jq/audio1.png"?/

img?draggable="true"?id="img2"?src="jq/audio2.png"?/

img?draggable="true"?id="img3"?src="jq/audio3.png"?/

div?id="div1"?draggable="true"暗涌/div

/div

div?id="trash"?class="album"

h2垃圾箱/h2

h1?id="h1"?draggable="true"what/h1

/div

br/

/body

script

console.log("start");

info?=?document.getElementById("info");

src?=?document.getElementById("album");

target?=?document.getElementById("trash");

function?converse(){

target.ondragstart?=?function(e){

var?dragid?=?e.target.id;

var?divdraged?=?document.getElementById(dragid);

console.log(divdraged);

divdraged.ondragend?=?function(){

info.innerHTML?=?"h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

}

e.dataTransfer.setData("div",dragid);

}

target.ondrag?=?function(){

info.innerHTML?=?"h2確認回收此垃圾/h2"

}

src.ondrop?=?function(e){

var?dragid?=?e.dataTransfer.getData("div");

console.log(dragid);

var?dragobject?=?document.getElementById(dragid);

console.log(dragobject);

dragobject.parentNode.removeChild(dragobject);

info.innerHTML?=?"h2恢復成功！/h2";

src.appendChild(dragobject);

e.preventDefault();

}

src.ondragenter?=?function(e){

e.preventDefault();

}

src.ondragover?=?function(e){

e.preventDefault();

}

}

function?init(){

src.ondragstart?=?function?(e)?{

var?dragImgId?=?e.target.id;

console.log(dragImgId);

var?dragImg?=?document.getElementById(dragImgId);

dragImg.ondragend?=?function(e){

info.innerHTML="h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

};

e.dataTransfer.setData("img",dragImgId);

};

src.ondrag?=?function(e){

info.innerHTML="h2--照片正在被拖動--/h2";

}

target.ondragenter?=?function(e){

e.preventDefault();

}

target.ondragover?=?function(e){

e.preventDefault();

}

target.ondrop?=?function?(e)?{

var?draggedID?=?e.dataTransfer.getData("img");

console.log(draggedID);

var?oldElem?=?document.getElementById(draggedID);

oldElem.parentNode.removeChild(oldElem);

target.appendChild(oldElem);

info.innerHTML="h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

e.preventDefault();

}

}

init();

converse();

/script

/html

JQuery中怎么使用on方法綁定hover事件

代碼如下：

$(obj).on("mouseover mouseout",function(event){ if(event.type == "mouseover"){ //鼠標懸浮 }else if(event.type == "mouseout"){ //鼠標離開 } })

jQuery hover事件簡單實現(xiàn)同時綁定2個方法

本文實例講述了jQuery

hover事件簡單實現(xiàn)同時綁定2個方法。分享給大家供大家參考，具體如下：

這里將hover事件同時掛2個方法：

1個是懸停的時候執(zhí)行的，另外一個是離開的時候執(zhí)行

代碼如下：

$(document).ready(function()

{

$("#orderedlist

li").hover(

function()

{$(this).addClass("blue");},

function()

{$(this).removeClass("blue");}

);

});

PS：上面的代碼小編沒有進行格式化處理，這里順便為大家推薦幾款在線代碼格式化、美化工具，相信大家在以后的開發(fā)過程中會用得到：

在線JavaScript代碼美化、格式化工具：

JavaScript壓縮/格式化/加密工具：

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：

在線JSON代碼檢驗、檢驗、美化、格式化工具：

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

jQuery中hover方法和toggle方法使用指南

jQuery提供一些方法（如：toggle）將兩種事件效果合并到一起，比如：mouseover、mouseout；keyup、keydown等

1、hover函數(shù)

hover(over,out)一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態(tài)。

參數(shù):

over

(Function)

:

鼠標移到元素上要觸發(fā)的函數(shù)。

out

(Function):

鼠標移出元素要觸發(fā)的函數(shù)。

復制代碼

代碼如下:

script

type="text/javascript"

$(function(){

$("#panel

h5.head").hover(function(){

$(this).next().show();//

鼠標懸浮時觸發(fā)

},function(){

$(this).next().hide();//

鼠標離開時觸發(fā)

})

})

/script

2、toggle函數(shù)

toggle(fn,fn)

每次點擊時切換要調(diào)用的函數(shù)。如果點擊了一個匹配的元素，則觸發(fā)指定的第一個函數(shù)，當再次點擊同一元素時，則觸發(fā)指定的第二個函數(shù)。隨后的每次點擊都重復對這兩個函數(shù)的輪番調(diào)用。

可以使用unbind("click")來刪除。

復制代碼

代碼如下:

script

type="text/javascript"

$(function(){

$("#panel

h5.head").toggle(function(){

$(this).next().show();//

第一次點擊時觸發(fā)

},function(){

$(this).next().hide();//

第二次點擊時觸發(fā)，之后不停的切換

})

})

/script

toggle()

方法切換元素的可見狀態(tài)。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。toggle()方法切換元素的可見狀態(tài)。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

所以上述的代碼還可以寫成：

復制代碼

代碼如下:

script

type="text/javascript"

$(function(){

$("#panel

h5.head").toggle(function(){

$(this).next().toggle();

},function(){

$(this).next().toggle();

})

})

/*$(function(){

$("#panel

h5.head").click(function(){

$(this).next().toggle();

})

})*/

/script

還可以添加一些css樣式：

復制代碼

代碼如下:

style

type="text/css"

.highlight{

background:#FF3300;

}

/style

script

type="text/javascript"

$(function(){

$("#panel

h5.head").toggle(function(){//配合css樣式使用

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

/script

小伙伴們是否對jQuery中常見的hover事件和toggle事件有了新的認識了呢，希望本文能給大家?guī)硪恍椭?/p>

網(wǎng)站欄目：jquery懸浮事件,jquery移入事件
文章轉(zhuǎn)載：http://chinadenli.net/article22/dsgdsjc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、App開發(fā)、虛擬主機、全網(wǎng)營銷推廣、網(wǎng)站導航、響應式網(wǎng)站

廣告

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