jquery中有2个对应的事件,那就是mouseover与mouseout。mouseover就是移动到元素触发的事件,mouseout就是离开元素触发事件。
示例：
当鼠标从元素上移开时，改变元素的背景色：
jQuery 代码:
$("div")mouseout(function(){
$("div")css("background-color","#E9E9E4");
});
$("div")mouseover(function(){
$("div")css("background-color","yellow");
});
实现这种功能的jquery是相当简单的，list元素鼠标移入，当前元素里的 span显示；移出则相反，具体代码如下：
$(function(){//鼠标移入
$('list')mouseenter(function(){//这里使用mouseover也可以，使用mouseenter是防止冒泡
(this)find('span')show();//这里的show可以改成animate，toggle都可以
});
//鼠标移出
$('list')mouseleave(function(){//这里使用mouseover也可以，使用mouseenter是防止冒泡
$(this)find('span')hide();//这里的hide可以改成animate，toggle都可以
});
});
如何防止鼠标移出移入子元素触发mouseout和mouseover事件:
关于mouseout和mouseover事件这里就不多介绍了，具体可以参阅javascript的mouseout和mouseover事件详解一章节。
这两个事件有一个共同特点，那就是当鼠标移入或者移出子元素的时候都会触发对应的事件，这个往往在实际应用中是不需要的，或者说能够带来很大的困扰，下面就通过实例代码介绍一下如何避免此影响。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content=">
$("star_span a")mouseover( function(){
var index = $(this)parent("star_span")children("a")index(this);
alert(index);
});
jQuery的函数调用跟js不一样。
mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，mouseout事件于用户把鼠标移出一个元素时触发。\x0d\下面为你详细介绍下jquery中的鼠标事件：\x0d\(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发；\x0d\$('p')click(function(){\x0d\alert('click function is running\x0d\!');\x0d\});\x0d\(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于 *** 作系统的设置。一般双击事件在页面中不经常使用；\x0d\$('p')dbclick(function(){\x0d\alert('dbclick function is running\x0d\!');\x0d\});\x0d\(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发；\x0d\$('p')mousedown(function(){\x0d\alert('mousedown function is\x0d\running !');\x0d\});\x0d\(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发；\x0d\$('p')mouseup(function(){\x0d\alert('mouseup function is running\x0d\!');\x0d\})click(function(){\x0d\alert('click\x0d\function is running too !');\x0d\});\x0d\(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性；\x0d\(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。
比较一下事件对象中 clientX和clientY的值，如果CX是变大说明是从左进来的，变小则是从右进来的；同理CY如果变大说明是从上进来的，变小则是从下进来的。
补充一下用onmousemove
var x2 = 0;
var y2 = 0;
oDivonmousemove = function(e)
{
var oEvent = e || event;
var x1 = oEventclientX;
var y1 = oEventclientY;
//这里是判断部分，要考虑初次进入的情况我就不写了,判断最终都是要比较x1和x2的大小，y1和y2的大小
//判断完成后把获取的坐标值传给x2和y2以备下次比较
x2 = x1;
y2 = y1;
}
以上就是关于请教一个问题，关于jquery判断鼠标移动到当前div和离开div的全部的内容，包括:请教一个问题，关于jquery判断鼠标移动到当前div和离开div的、JQUERY多个DIV鼠标移入移出显示隐藏对应DIV、如何防止鼠标移出移入子元素触发mouseout和mouseover事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）