Question

这似乎是一个非常常见的问题，虽然我已经尝试过使用addClass / removeClass而不是直接进行CSS操作的建议，但我尝试过mouseleave / mouseout但都会导致问题。

我想要的只是一个简单的翻转，改变了课程！我尝试的一切都不一致地打开或关闭了课程。我一直试图容纳的唯一其他要求是让听众生活在一个函数而不是内联。是什么让这变得不可能？

function highlight(_event){
  $(this).addClass("Highlighted");
}
function unhighlight(_event){
  $(this).delay(2000,function(){
    $(this).removeClass("Highlighted");
  });
}

$(document).ready(function () { 
  $(".Content").live('mouseenter',highlight);
  $(".Content").live('mouseout',unhighlight);
});

JSFiddle of the above

修改

添加.stop(true,true)似乎有所帮助。

Answer 1

如果您想使用直播，可以使用.toggleClass()，.mouseover()＆amp; .mouseout()：

$(".content").live("mouseover mouseout", function() {
    $(this).toggleClass("highlight");
});

查看demo here

更新：我不能离开这个，所以继续搞乱你的例子 - 在评论后你在其他地方使用这些功能。所以这就是我发现的：

而不是调用.mouseout()使用.mouseleave() - 由于某种原因.mouseout()在鼠标移动时多次调用 - 当鼠标首次进入对象时甚至会被调用... .. 看到最后的演示，看看我的意思

其次，.delay()在这里并没有被正确使用 - 它实际上是用于排队效果 - 但你真正想要的是添加延迟功能（虽然这是你所追求的效果所以请使用.setTimeout()为你做这个电话。

As per the doc's:

.delay()方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 它例如，没有提供一种方法取消延迟 - .delay()不是替换JavaScript的原生 .setTimeout()功能，可能更多适用于某些用例。

所以完成的函数看起来像这样：

function highlight(_event) {
    $(this).addClass("Highlighted");
}

function unhighlight(_event) {
    var obj = $(this);
    setTimeout(function() {
        obj.removeClass("Highlighted");
    }, 2000);
}

$(document).ready(function() {
    $(".Content").live('mouseenter', highlight);
    $(".Content").live('mouseleave', unhighlight);  
});

请参阅demo here ，这将显示我对多次触发的.mouseout()事件的意思，其中.mouseleave()函数仅在鼠标时调用一次实际上离开了。
注意：使用您的输入按钮按警报确定，不要移动鼠标!!

请参阅demo here，查看最终版本，尽可能接近原始版本。

Answer 2

如果你愿意，我认为你可以转储这些功能而不是这样做 - 如果你当然没有使用这些功能：

$（document）.ready（function（）{
    $（ “内容”），住（ '的mouseenter'，函数（）{         $（本）.addClass（ “突出”）;
    }）;
    $（ “内容”），住（ '鼠标移开'，函数（）{       $（本）.delay（2000，函数（）{         $（本）.removeClass（ “突出”）;       }）;
    }）;   }）;

Answer 3

尝试

//Might be better to use .toggleClass("Highlighted");

var timer;

$(".Content").hover(
    function(){
        clearTimeout(timer);
        $(this).addClass("Highlighted");
    },
    function(){
        timer = setTimeout(function(){
            $(this).removeClass("Highlighted");
        }, 2000);
    }
);

使用Jquery.live的Funky mouseenter / mouseout

3 个答案: