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

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...
  }
});