Question

我有一个悬停效果的图像（鼠标悬停时效果较高）。当鼠标移入和移出时，它可以根据需要工作。

然而，图像本身正在移动（我定期更改css属性顶部）。当鼠标不移动并且图像在鼠标光标下移动时，不会触发相关事件。这意味着，不会调用悬停函数。我也尝试过使用mouseenter和mouseleave事件，但它们也不起作用。

什么是获得所需行为的好方法（鼠标悬停在图像上时悬停效果，无论它到达何处）？

Answer 1

如果鼠标不移动，您将无法触发鼠标事件，但是您可以检查图像移动时鼠标的位置。您需要做的是跟踪全局变量中的鼠标位置，并在移动时检查该位置是否在图像内部。

jQuery有一篇很好的文章，介绍如何使用他们的库：http://docs.jquery.com/Tutorials:Mouse_Position

要查找图像的位置，您可以使用jQuery位置函数：http://api.jquery.com/position/

使用该位置，您可以使用图像的高度/宽度创建边界。在你的图像移动检查，看看全局鼠标位置是否在你的图像边界内，你应该好好去。

这就是我编写代码的方法（完全未经测试的btw ）：

var mousex = 0;
var mousey = 0;

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      mousex = e.pageX;
      mousey = e.pageY;
   }); 
})

img.move(function(){
  ...move code...
  var p = $(this).position();
  if(mousex >= p.left && mousex <= p.left + $(this).width
     && mousey <= p.top && mousey >= p.top + $(this).height)
  {
   ...opacity code...
  }
});

Answer 2

您可以手动测试，以便在移动图像时查看鼠标是否在图像中，然后触发所需的事件。

Mouse position using jQuery outside of events将向您展示如何跟踪鼠标位置。然后找到图像的偏移量，看看它是否在图像中。

Answer 3

除了wajiw和ryan的答案之外，你应该在检测到鼠标在图像上方/不在图像上时触发mouseenter和mouseleave事件，这样你绑定到.hover()的任何代码仍然会被执行：< / p>

$(".my-image").trigger("mouseenter");
$(".my-image").trigger("mouseleave");

Answer 4

@wajiw发布了一个很好的解决方案，但遗憾的是它受到了拼写错误的影响，这意味着在您修复它之前它不会开箱即用。

这是一个可以使用的类，经过测试和工作，可以测试对象是否在鼠标下。

课程定义

// keeps track of recent mouse position and provides functionality to check if mouse is over an object
// useful for when nodes appear underneath the mouse without mouse movement and we need to trigger hover
// see http://stackoverflow.com/questions/4403518
function MouseTracker($) {
  var mouseX, mouseY;

  $(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
  });

  return {
    isOver: function(node) {
      var p = $(node).offset();
      if (mouseX >= p.left && mouseX <= p.left + $(node).width()
         && mouseY >= p.top && mouseY <= p.top + $(node).height())
      {
        return true;
      }
      return false;
    }
  }
}

使用示例

var mouseTracker = new MouseTracker(jQuery);
if (mouseTracker.isOver($('#my-object-in-question'))) {
  $('#my-object-in-question').trigger("mouseenter");
}

希望有所帮助。

如果有人想要的话，我可以很容易地将它变成一个jQuery插件，只需告诉我一行，我就会继续。

马特

当元素以编程方式在鼠标下移动时，不会触发jQuery悬停

4 个答案: