jquery悬浮事件,jquery移入事件

jquery on hover事件怎么写

//on('第一个参数是事件名称，如click，change等', '第二个参数表示执行的方法')

成都创新互联业务包括：成品网站、企业产品展示型网站建设、品牌网站设计、电子商务型网站建设、成都外贸网站建设公司(多语言)、购物商城网站建设、定制开发、成都全网营销推广等。效率优先，品质保证，用心服务是我们的核心价值观，我们将继续以良好的信誉为基础，秉承稳固与发展、求实与创新的精神，为客户提供更全面、更优质的互联网服务！

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

});

//查看更详细的说明

//hover('第一个鼠标移动到某个元素执行方法', '第二个鼠标移开当前DOM节点后执行方法')

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

//鼠标移动到body上执行

}, function(){

//鼠标移开body后执行

});

//查看更详细的说明

附上jquery中文API文档，

jquery 中当鼠标被按下然后拖动,经过一个元素,如何触发这个元素绑定的悬浮事件呢

用h5的拖放事件。ondrag,ondragenter,ondragover,ondrop等。给你一个demo。记得自己加图片。

!DOCTYPE HTML

html

head

titleHTML5实现拖拽操作/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事件简单实现同时绑定2个方法

本文实例讲述了jQuery

hover事件简单实现同时绑定2个方法。分享给大家供大家参考，具体如下：

这里将hover事件同时挂2个方法：

1个是悬停的时候执行的，另外一个是离开的时候执行

代码如下：

$(document).ready(function()

{

$("#orderedlist

li").hover(

function()

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

function()

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

);

});

PS：上面的代码小编没有进行格式化处理，这里顺便为大家推荐几款在线代码格式化、美化工具，相信大家在以后的开发过程中会用得到：

在线JavaScript代码美化、格式化工具：

JavaScript压缩/格式化/加密工具：

json代码在线格式化/美化/压缩/编辑/转换工具：

在线JSON代码检验、检验、美化、格式化工具：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

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

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

1、hover函数

hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

参数:

over

(Function)

:

鼠标移到元素上要触发的函数。

out

(Function):

鼠标移出元素要触发的函数。

复制代码

代码如下:

script

type="text/javascript"

$(function(){

$("#panel

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

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

鼠标悬浮时触发

},function(){

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

鼠标离开时触发

})

})

/script

2、toggle函数

toggle(fn,fn)

每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

可以使用unbind("click")来删除。

复制代码

代码如下:

script

type="text/javascript"

$(function(){

$("#panel

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

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

第一次点击时触发

},function(){

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

第二次点击时触发，之后不停的切换

})

})

/script

toggle()

方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。toggle()方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

所以上述的代码还可以写成：

复制代码

代码如下:

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事件有了新的认识了呢，希望本文能给大家带来一些帮助。