Question

对于任何了解jQuery的人来说，这都是个好主意：

我有一个导航<ul class="nav">我想改变一下。我基本上正在寻找a:hover效果，刚刚消失（我正在使用精灵，并从一个精灵区域转到下一个）。

我标题中的代码如下所示：

$(document).ready(function(){
  $(".nav li").mouseover(function(){
    addClass('hovered');
  });
});

在我对jQuery的理解中，这说“一旦准备好文档，就在所有.nav li元素上听一个鼠标悬停事件。当你听到这个时，添加一个”悬停“的类。这就是我的意思想要发生，但现在 - 没有 - 正在发生。

最终我会添加动画和mouseOut，但我希望能够按照我的意愿使这部分工作。谢谢！

Answer 1

您正在寻找悬停（http://api.jquery.com/hover/），并且您需要使用LI定位$(this)：

$(document).ready(function(){
  $(".nav li").hover(function(){
    $(this).addClass('hovered');
  }, function(){
    $(this).removeClass('hovered');
 });
});

Answer 2

您必须为.addClass提供一个可以使用的元素。

$(this).addClass('hovered');

Answer 3

只是一个提示，当你最终为mouseout做一些事情时，你可以用

来提高可读性

$(".nav li").hover(function() {
  // over
}, function() {
  // and out
});

...或者我喜欢这样做，使用jQuery插件hoverIntent。

mouseover和addClass jQuery示例

3 个答案: