jquery hover().addClass() problem

Question

This demo does 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.

Please include code in the content of the question instead of only via a link. Thanks. EDIT: I updated your question for you. Notice the syntax highlighting in the javascript. It offers a pretty big clue that something's malformed. — user113716, Dec 05 '10 at 13:31

score 28 · Accepted Answer · answered Dec 05 '10 at 13:16

28

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).

answered Dec 05 '10 at 13:16

David Thomas

249,100
51
377
410

3

And if you *had* we'd all be a little less-rewarded with rep; so no worries at all =) – David Thomas Dec 05 '10 at 13:40
I don't see **JS Lint** in JS Fiddle site? but there is **JSHints**, did they change it? – Mohammed Joraid Apr 08 '14 at 09:46
I hadn't noticed, to be honest, but it looks like they did, yeah. That, or I spectacularly misread the name. Either way is quite possible. – David Thomas Apr 08 '14 at 10:22

score 6 · Answer 2 · answered Dec 05 '10 at 13:15

6

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.

answered Dec 05 '10 at 13:15

Oded

489,969
99
883
1,009

score 3 · Answer 3 · answered Dec 05 '10 at 13:27

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

score 1 · Answer 4 · answered Dec 05 '10 at 13:17

1

You Have Missed the quote '

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

answered Dec 05 '10 at 13:17

XMen

29,384
41
99
151

jquery hover().addClass() problem

4 Answers4

Linked