Question

我正在创建一个示例应用程序，我需要在用户将光标移离它时立即更改div的颜色。

它工作但准确，不确定我哪里出错。

请参阅下面的示例应用程序。

http://jsfiddle.net/manishparab/3q1trzwk/

var cursorX = 0;
var cursorY = 0;

$(document).ready(function() {
    $(".a").mouseover(function() {
        animateDiv();
        setInterval(function() {
            isCursorOnSquare('.a')
        }, 1);
    });
});

$(document).on('mousemove', function(e) {
    cursorX = e.pageX;
    cursorY = e.pageY;
});

function isCursorOnSquare(elem) {
    var pos, width, height;
    pos = $(elem).position();
    if ((Math.abs(pos.left - cursorX) <= 100 && Math.abs(pos.top - cursorY) <= 100)) {
        $(elem).css("background-color", "red");
    } else {
        $(elem).css("background-color", "yellow");
    }
}

function makeNewPosition() {
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];    
}

function animateDiv() {
    var newq = makeNewPosition(); 
    var speed = 2000; 
    $('.a').animate({ top: newq[0], left: newq[1] }, speed, function() {
        animateDiv();        
    });
}

Answer 1

在使用.abs（）的代码中，当鼠标位于div的左侧或顶部-100px时，鼠标事件也会触发。

您也可以使用mouseenter（）来完成此任务，

$("div").mouseenter(function(){
    $("div").css("background-color", "red");
}).mouseleave(function(){
$("div").css("background-color", "yellow");
});

Answer 2

使用'mouseenter'和'mouseout'事件会有所帮助。

$('#divID').on('mouseenter', function () {
  //your code
});

$('#divID').on('mouseout', function () {
  //your code
});

jQuery动画鼠标事件

2 个答案: