jquerydiv鼠标,jQuery鼠标事件

JQUERY多个DIV鼠标移入移出显示隐藏对应DIV

实现这种功能的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都可以

});

});

相关问答

Q1: jquery 怎么判断鼠标是否在div上

有三种方法，刚好看到了这篇文章，分享给大家：

jquery判断鼠标是否在div里的三种方法

下面是三种方法的具体源码：

//#aijquery 就是要判断的DIV

//方法一：

if($.contains($("#aijquery")[0],e.target) || $("#aijquery")[0]==e.target){

    $(".info").text("鼠标在这个DIV里");

}else{

    $(".info").text("鼠标不在这个DIV里");

}

//方法二：

$("#aijquery").mouseover(function(){

    $(".primary").text("方法二：鼠标在这个DIV里");

}).mouseout(function(){

    $(".primary").text("方法二：鼠标不在这个DIV里");

});

//方法三：

var x=e.clientX;

var y=e.clientY;

var div_x_1 = $("#aijquery").offset().left;

var div_y_1 =  $("#aijquery").offset().top;

var div_x_2 = $("#aijquery").offset().left+$("#aijquery").outerWidth();

var div_y_2 =  $("#aijquery").offset().top+$("#aijquery").outerHeight();

if( x  div_x_1 || x  div_x_2 || y  div_y_1 || y  div_y_2){

    $(".danger").text("方法三：鼠标不在这个DIV里");

}else{

    $(".danger").text("方法三：鼠标在这个DIV里");

}

上面给的那个链接里，有完整的在线实例演示的，很好，很强大！

Q2: 如何用jQuery实现div随鼠标移动而移动

用jQuery实现div随鼠标移动而移动方法：

让div随着鼠标走，需要知道几个关键点

如何获取鼠标的横纵坐标。如何让div在别的html代码上移动。

var xx = e.originalEvent.x || e.originalEvent.layerX || 0;

var yy = e.originalEvent.y || e.originalEvent.layerY || 0;

$('#month').css({top: yy, left: xx});//注意这是用css的top和left属性来控制div的。

还有个注意的地方，div要设置成绝对位置才可以。

position: absolute;

只有这样div才能在其他的显示元素上面随便移动。