jquery - 如何同时使用悬停属性和 jQuery 的 mousemove？

Question

我编写了一个简单的 div，其中包含仅当鼠标存在于 div 中时才使用 jQuery 的 mousemove 属性跟随鼠标光标的图像。它工作得很好，除了我希望默认情况下隐藏图像，并且只在鼠标存在时出现（然后当鼠标离开时，再次消失。）这通常可以使用悬停属性处理，但是与 mousemove 属性一起放置时，它不起作用。有任何想法吗？这是我目前使用的基本代码：

$('.containerDIV').mousemove(function(e) {$('.image').css({'left' : e.pageX+'px',});});

这是一个演示页面： http ://www.fluidweb.ca/movingImage

谢谢您的帮助！

安德鲁

Answer 1

最好将一个jQuery.mousenter和jQuery.mouseleave事件绑定到 div 本身。

$("div.containerDIV").mouseenter(function(){
  $("img.sun").show();
}).mouseleave(function(){
  $("img.sun").hide();
});

Answer 2

更简单：

$("div.containerDIV").hover(function(e){
    $("img.sun")[e.type === 'mouseenter' ? 'show' : 'hide']();
});