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

Question

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

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

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

感谢您的帮助！

安德鲁

Answer 1

最好绑定 jQuery.mouseenter 和 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']();
});