我有一个悬停效果的图像(当鼠标悬停在它上面时,不透明度更高).当鼠标移入和移出时,它可以根据需要工作.
但是,图像本身正在移动(我会定期更改css属性顶部).当鼠标不移动并且图像在鼠标光标下移动时,不会触发相关事件.这意味着,不会调用悬停函数.我也试过使用mouseenter和mouseleave事件,但它们也不起作用.
解决方法
如果鼠标没有移动,您将无法触发鼠标事件,但是您可以在图像移动时检查鼠标的位置.您需要做的是跟踪全局变量中的鼠标位置,并在移动时检查该位置是否在图像内部.
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...
}
});
