Question

我想为hover（）快捷方式创建一组超级简单的处理程序，但我一直都在失败。我最终只是使用了mouseenter / mouseleave，但我希望看到我的问题在这里用于将来的目的。另外，我是js和jquery的新手，所以请和我一起玩。

$function(){
     $('div.profile').find('li:gt(0)').each(function(){
           this.hover(highlight,offlight);
});
});

var highlight=function(){
   $(this).css("background","blue");
}

var offlight=function(){
   $(this).css("background","none");
}

好的，这可能是错误的。首先，我不确定“this”函数上下文是否在后两个函数定义中起作用，因为这不是在ready处理程序之外真正定义的。如果它不起作用，我可以在这里做任何其他事情以确保突出显示的“li”是同一个被悬停的吗？我应该只是制作突出显示和offlight匿名功能还是有另一种方式？

2）无论我做什么，似乎我的悬停事件处理程序都会失败。我认为我在这里正确使用了每个功能。我不知道是什么给了。

Answer 1

您在DOM元素上调用.hover()。而是在jQuery对象上调用它。

//-----v------was missing the "("
      $(function() {
           $('div.profile').find('li:gt(0)').hover(highlight,offlight);
      });
// attach .hover() to all the <li> found-------^

如您所见，不需要.each()。

总的来说，如果您所做的只是简单的背景更改，我会使用CSS :hover伪选择器：

  $(function() {
       $('div.profile').find('li:gt(0)').addClass( "hoverMe" );
  });

CSS

li.hoverMe {
    background:none;
}
li.hoverMe:hover {
    background:blue;
}

如果没有对您的标记进行一些调整，则无法在IE6中使用。

Answer 2

在each函数中，this不引用jQuery对象。您需要将其包装在$()：

中

$(this).hover(highlight,offlight);

Jquery失败了（为什么没有悬停事件为我工作）？

2 个答案: