jQuery在页面加载时应用悬停

时间:2013-07-08 08:40:35

标签: jquery hover

$("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执行此操作的最佳方法是什么?

3 个答案:

答案 0 :(得分:2)

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

通过悬停文本进行测试,然后按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") });
        }
    });
});

答案 1 :(得分: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/

答案 2 :(得分:0)

您可以使用mousemove()事件代替。这是demo

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