Jquery each <li> apply mouseover background

Question

Can't seem to get this to work:

$(function() {
  $("#side").$("li").each(function() {
    $(this).mouseover(function() {
      $(this).backgroundColor = "#c0c0c0";
    });
  });
});

The HTML snippet to iterate over:

<div id='side'>
   <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
   </ul>
</div>

Solution 1

Try this instead:

$(function() {
    $("#side").children("li").each(function() {
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", "#FFF"); 
        });
    });
});​

The issues I saw were:

1. The selector you were using for your ul/li was incorrect. You need to use the children method.
2. Changing the css is different in jquery then javascript. Use the css method instead.
3. Make sure to change the color back to default (in this case white) when the mouse leaves. Otherwise it will always be that grey (even when the mouse leaves).

The JSFiddle: http://jsfiddle.net/L8hsz/
Hope that helps.

EDIT: If you're worried about the background color, you can do something similar to:

$(function() {
    $("#side").children("li").each(function() {
        $(this).data("DefaultBGColor", $(this).css("background-color"));
        $(this).mouseover(function() {
            $(this).css ("background-Color", "#c0c0c0");
        });
        $(this).mouseout(function () {
            $(this).css("background-Color", $(this).data("DefaultBGColor")); 
        });
    });
});​

Solution 2

I think you can use the hover event as well:

$(function() {
    $("#side").children("li").hover(
        function() {
            $(this).css ("background-Color", "#c0c0c0");
        },
        function() {
            $(this).css("background-Color", "#FFF"); 
        }
   );
});​

Solution 3

Just an fyi - for li block hover effects, you do not need javascript or Jquery, this can be done 100% in CSS. The only exclusion is if you need to work with IE6.

I forked Ben's comment above:

http://jsfiddle.net/stevembrennan/tLZNL/

Markup from Original Example

1

2

3

CSS to add

ul {float:left; left:0; position:absolute; right:auto;  width:auto;}
li {clear:left; float: left; left:auto; margin:0px; width:100%; text-align:left;      display:block; background-color:#00a0e1;}
li a {display:block; padding:4px 10px;}
li a:hover {background-color:red;}

No JS needed

If you need help on how to do this in IE6, let me know. There is a trick in which you can add a block element around the entire thing and it will trick the hover into kicking in. Apologies for such a late reply.