Question

这就是我正在做的事情：https://jsfiddle.net/atg5m6ym/2625/

我正在使用jQuery动画一个div向左移动，然后当我将鼠标悬停在div上时以及当我将鼠标从它移开时登录到控制台：

$("div").animate({left: '250px'}, 6000);

$('div').hover(function() {
    console.log("Mouse hovered on div!");
}).mouseleave(function() {
        console.log("Mouse left div!");
})

当然，一旦我将鼠标放在元素上，程序就会运行console.log("Mouse hovered on div!");。

但是，如果我让鼠标闲置并且动画元素移动到它上面，$('div').hover(function(){})中的任何内容都不会运行。我必须将鼠标移动到元素上才能运行代码，而不是让元素变为鼠标。

如果我将鼠标悬停在元素上，然后让鼠标闲置，也会发生同样的事情。在元素离开之后，$('div').mouseleave(function(){})中的任何内容都不会运行，直到我将鼠标从其位置移开。

有什么方法可以解决这个问题吗？我正在使用动画div，即使鼠标处于空闲状态并且div通过它，我也需要运行代码。

Answer 1

手动取鼠标的最后已知位置，并将其与圆圈的位置进行比较。这有点广泛但它应该能为您带来正确的结果。

这是一个JSFiddle： https://jsfiddle.net/3vpaoj59/

$("div").animate({left: '250px'}, 6000);

$(document).ready(function() {
  // record down the position of the cursor
  var cursorX;
  var cursorY;
  document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
  }
  // boolean to know if hovered or not, and to know whether to report in console.log
  var hover = false;
  // function to call by setinterval to check if mouse is within radius
  function checkMouse(){
    // find the centerpoint of the circle by taking its position then adding half its width/height to each coordinate
    var left = $("#foo").offset().left+$("#foo").width()/2;
    var top = $("#foo").offset().top+$("#foo").height()/2;
    // use pythagorean theorem to find distance between two points
    var xdist = Math.pow(Math.abs(cursorX - left),2);
    var ydist = Math.pow(Math.abs(cursorY - top),2);
    var hypotenuse = Math.round(Math.sqrt(xdist+ydist));
    // check if the distance is less than radius
    if(hypotenuse <= $("#foo").width()/2 && !hover){
      // if true and not already reported true, report then fix
      console.log("mouse hovered on div!");
      hover = true;
    } else if (hypotenuse > $("#foo").width()/2 && hover){
      // if false and not already reported false, report then fix
      console.log("mouse left div!");
      hover = false;
    }
  }
  // repeatedly call this
  setInterval(checkMouse, 100);
});

我将div的ID改为＆＃34; foo＆＃34;为了方便。确保这样做，以便代码适用于您的项目，或修改JS以不使用＆＃34; foo＆＃34;。

<强>解释

您的问题发生的原因是因为您的鼠标的坐标仅在每次移动光标时更新，并且.hover检查悬停状态时的情况。因此，我们需要模拟确定悬停的事件并重复调用它，即使光标没有移动以确保悬停状态更新。

jQuery：检查鼠标是否在动画上？

1 个答案: