jquery hover().addClass() 问题答案

【问题标题】：jquery hover().addClass() problemjquery hover().addClass() 问题
【发布时间】：2010-12-05 13:14:40
【问题描述】：

当您悬停列表项时，此演示不会添加类。

我在这里做错了什么？

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

html

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Chips</li>
    <li>Socks</li>
</ul>

css

.hover{
    color:green;
    font-size: 20px;
}

提前致谢。

【问题讨论】：

请在问题的内容中包含代码，而不是仅通过链接。谢谢。编辑：我为你更新了你的问题。注意 javascript 中突出显示的语法。它提供了一个相当大的线索，表明某些东西格式不正确。

标签： jquery hover

【解决方案1】：

您的 JavaScript 格式错误：

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

应该是：

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

如果您单击屏幕顶部的JS Lint 按钮，它会告诉您这一点（这不是批评，只是一个注释 em> 供您将来使用 JS Fiddle）。

【讨论】：

如果你有，我们的代表奖励会少一点；所以完全不用担心=)
我在 JS Fiddle 站点中没有看到 JS Lint？但是有 JSHints，他们改了吗？
说实话，我没有注意到，但看起来他们确实注意到了，是的。那，或者我严重误读了这个名字。无论哪种方式都是可能的。

【解决方案2】：

您的 javascript 语法不正确

$(this).addClass('hover);

应该是：

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

你忘记终止字符串了。

这个改动效果很好。

【讨论】：

【解决方案3】：

虽然其他人注意到缺少引号，但我注意到您确实应该使用 CSS 而不是 javascript：

http://jsfiddle.net/aBaw6/8/

li:hover{
    color:green;
    font-size: 20px;
}

IE6 在 <li> 上不支持此功能，但如果需要支持，您可以使用 <a> 包装内容并设置样式。

如果你确实使用了 javascript，你可以像这样减少你的代码：

http://jsfiddle.net/aBaw6/7/

$("li").hover( function (e) {
    $(this).toggleClass('hover', e.type === 'mouseenter');
});

【讨论】：

【解决方案4】：

你错过了报价'

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

【讨论】：