Question

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

我在这里做错了什么？

$("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;
}

提前致谢。

Answer 1

您的JavaScript形成错误：

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

应该是：

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

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

Answer 2

您的javascript语法不正确

$(this).addClass('hover);

应该是：

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

你忘了终止字符串。

这种改变很好。

Answer 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');
});

Answer 4

你错过了引用'

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

jquery hover（）。addClass（）问题

4 个答案: