首页 文章

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

提问于
浏览 次
6

我有一个悬停效果的图像（当鼠标悬停在它上面时，不透明度更高） . 当鼠标移入和移出时，它可以根据需要工作 .

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

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

javascript animation javascript-events jquery

4 回答

  • 2

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

    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...
  }
});
    回复于
  • 1

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

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

    回复于
  • 8

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

    $(".my-image").trigger("mouseenter");
$(".my-image").trigger("mouseleave");
    回复于
  • 2

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

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

    Class definition

    // 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;
    }
  }
}

    Usage example

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

    希望有所帮助 .

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

    马特

    回复于

相关问题