CODEWITHSUNDEEP
jqueryhtml-listsmouseovereachbackground-color
Jonathan
Jonathan

Reputation: 11494

Jquery each <li> apply mouseover background

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>

Upvotes: 2

Views: 11832

Answers (3)

Steve
Steve

Reputation: 11

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.

    Upvotes: 1

    Jess
    Jess

    Reputation: 8700

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

    Upvotes: 4

    filype
    filype

    Reputation: 8380

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

    Upvotes: 2

    Related Questions