jquery hover (). addClass () проблема

Question

http://jsfiddle.net/aBaw6/2/

Эта демонстрация не добавляет класс при наведении курсора на элемент списка.

Что я здесь не так делаю?

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