2 
$("img").mouseenter(function(){
    $(this).addClass("move");
});

情况是这样的：当你悬停img一个.move类被添加到它（即成为img.move悬停时）。这可能难以解释，但问题是我需要.move添加类，仅当img它尚未悬停在页面加载上时。

为了说明这一点，让我们假设我的网站有一个徽标img出现在每个页面的同一位置。

如果用户悬停徽标，.move则会向其添加类（使徽标“移动”与 css） 现在用户单击加载主页的徽标，但如果在新页面加载时他们的鼠标仍在徽标上，则.move类添加使徽标再次移动。如果页面加载时他们的鼠标已经在徽标上，我不希望徽标“四处移动”。如果他们将徽标从页面上的其他位置悬停，它应该只“四处走动”。

我需要这个：

（页面加载）>（鼠标未悬停img）>（如果鼠标悬停 img）>（添加.move类img）

但是摆脱这个：

（页面加载）>（鼠标已经悬停在img）> ！！！（添加 .move类img）！！！<--.move如果鼠标已经在img

使用 jQuery 执行此操作的最佳方法是什么？

4

3 回答 3

3

这是一个小提琴，它将阻止将悬停类添加到元素中，并确保在用户将鼠标从元素上移开并再次移回之前不会添加它。它可能可以简化一些，但它证明了这个概念。

通过悬停文本进行测试，然后按 CTRL+Enter 运行示例。

http://jsfiddle.net/PLP2d/2

$(document).ready(function() {
    $(window).one("mousemove", function() {
        $(".anch").hover(function() { $(this).hasClass("prevent") ? 0 : $(this).addClass("over");},
                         function() { $(this).removeClass("over") });

        if ($(".anch").is(":hover")) {
            $(".anch").addClass("prevent")
                      .removeClass("over")
                      .one("mouseleave", function() { $(this).removeClass("prevent") });
        }
    });
});
于 2013-07-08T09:28:23.190 回答
0

这是你要求的吗？

$(window).load(function(){ //when document + images are loaded

    if (!$('#yourimage').is(':hover')) {

       $('#yourimage').addClass('someclass'); 

       //add class to image if it's not hovered
       // on page load

    }

});

http://jsfiddle.net/AyAZx/417/

于 2013-07-08T09:13:03.013 回答
0

您可以改用mousemove()事件。这是演示

$("img").mousemove(function(){
    $(this).addClass("move");
});
于 2013-07-08T09:19:16.750 回答