jquery hover().addClass() problem

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

This demo doe开发者_高级运维s not add class when you hover a list item.

What am I doing wrong here?

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

Thanks in advance.

Your JavaScript was badly formed:

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

Should be:

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

If you click on the JS Lint button to the top of the screen it would've told you this (this isn't intended as a criticism, just a note for your future use of JS Fiddle).

Your javascript syntax is incorrect

$(this).addClass('hover);

Should be:

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

You forgot to terminate the string.

It works just fine with this change.

While others noted the missing quotation mark, I'd note that you should really be doing this with CSS instead of javascript:

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

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

IE6 doesn't support this on a <li>, but you could wrap the content with an <a> and style that if support is needed.

If you did use javascript, you could reduce your code like this:

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

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

You Have Missed the quote '

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