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

【问题标题】：How to use hover property simultaneously with jQuery's mousemove?如何同时使用悬停属性和 jQuery 的 mousemove？
【发布时间】：2010-07-27 22:35:25
【问题描述】：

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

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

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

感谢您的帮助！

安德鲁

【问题讨论】：

在黑暗中拍摄，但您不能只将鼠标悬停和鼠标悬停事件添加到.containerDiv 以将display:block 或display:none; 设置为.image？

标签： jquery hover mousemove

【解决方案1】：

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

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

【讨论】：

非常感谢！即使与 mousemove 属性结合使用，它也能完美运行。
为了记录，这里的代码代码相当于使用hover，因为hover定义为hover: function( fnOver, fnOut ) { return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );}

【解决方案2】：

更简单：

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

【讨论】：