How to change background-color of an li tag with hover?

Question

What's the best way to change the background-color of an li tag with onMouseOver? I tried it this way, but it won't work:

Code generating the HTML:

echo "<a href=".$obj_players->Page." target=_parent>
      <li style=\"background-color:#FFFFFF;\"><span class=\"left\">" . $obj_players->Name . "</span><span class=\"right\">" . $obj_players->Viewers . "</span></li></a>";

CSS:

#navlist li:hover {
    background-color:#2EA620;
}

#navlist li {
    width:175px;
    height:30px;
    text-align:center;
    line-height:30px;
    font:"Myriad Pro";
    font-size:14px;
    padding-left:10px;
    padding-right:10px;
    border-bottom:1px solid;
    border-color:#333;
}

Explanation: I have to declara the background color in the li tag because I have different li elements with different background colors. And li's are in a div with ID navlist.

I also have the problem that I don't want every li to change background color with onmouseover, but I will solve this later, since I think I should be able to manage it on my own.

Answer 1

You need to remove the background-color:#FFFFFF inline, and add that to the css. Then #navlist li:hover { background-color:#2EA620; } should work.

example: http://jsfiddle.net/jU8Pp/