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>

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