Question

当我离开选择器时，如果移动速度太快，则不会发生移位：

  $("#item").hover(function(){

  $(this).addClass("hover");

  }function(){

  $(this).removeClass("hover");

  });

Answer 1

我无法重现它。在这个页面中用Firebug写了这个：

$("p").hover(function() { $(this).html('a') }, function() { $(this).html('b') });

即使我移动得非常快，也一直有效。也许是因为你在代码中忘记了第二个函数之前的逗号？你用什么浏览器？

Answer 2

您可以在创建项目之前使用.live设置事件处理程序。

或

function thover() {
  $(this).toggleClass("hover");
}

$("#item").mouseEnter(thover).mouseLeave(thover);

或

$("item").hover(function () { $(this).toggleClass("hover",true); },
                function () { $(this).toggleClass("hover",false); }
);

Answer 3

这是一个解决方案：

CSS：

#item:hover, #item.hover {
    background-color: #f0f;
}

使用Javascript：

if ($.browser.msie) { // I'm not sure if IE7 or 8 support :hover yet
    $('#item').hover(
        function() { $(this).addClass('hover'); },
        function() { $(this).removeClass('hover'); }
    );
}

此代码使您的边缘情况更薄。

具有良好CSS支持的体面浏览器不应该因为IE错误而使用Javascript调用减慢速度。如果有人坚持使用IE浏览器，那么他们仍会获得悬停效果，但有时它可能会坚持下去。你真的非常关心这些人吗？

Answer 4

悬停卡住的问题取决于您使用的是哪种浏览器。浏览器越新，javascript引擎越快。你如何调用jQuery库也有所不同（我建议调用lib的本地副本或使用Google库API）。随着库的每个新版本的发布，它越来越快，因为它们减少了代码并使事情变得更有效率，所以我建议调用最新版本。

通过jQuery 1.4.2及更高版本的发布，可以调用.toggle()函数，而不是指定hover函数中包含的鼠标函数。您对代码的处理与.hover(mouseover, mouseout)基本相同（基本形式）。您调用的每个函数（使用.removeClass和.addClass）都会调用每个鼠标操作。

使用它可以加快你的代码，因为优化了切换以取代鼠标功能：

jQuery(document).ready(function($) {
  $('#item').hover(function() {
    $(this).toggleClass('hover');
  });
});

修改

但是，如果您想要添加动画或为.hover()函数指定属性，那么您最终会调用原始代码中的每个鼠标功能。虽然您也可以使用我上面使用的代码并使用.toggleClass()中的函数。

Jquery悬停不够快

4 个答案: