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

Question

我编写了一个简单的div，其中包含一个跟随鼠标光标的图像，只有当使用jQuery的mousemove属性在div中存在鼠标时。它工作得很好，除了我希望图像默认隐藏，并且仅在鼠标出现时出现（然后当鼠标离开时再次消失。）这通常可以使用悬停属性处理，但是使用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']();
});