Changing the background colour with mouseover and mouseout

Question

I am messing around with this scroll menu and I want each li to change to different colours instead of the same one.

var colorOver = '#31b8da';
var colorOut = '#1f1f1f'; 

But this changes the colour of all of them.

The html looks like this:

<div id="sidebar">
    <ul id="menu">
        <li id="first"><a href="#">blog <span> / 2012</span></a></li>
        <li id="second"><a href="#">me <span> / 2012</span></a></li>
        <li id="third"><a href="#">etc <span> / 2012</span></a></li>
        <li id="fourth"><a href="#">etc <span> / 2012</span></a></li>
        </ul>
    </div>

I assume you just tell it an id ...

Hopefully I've given enough info.

Thanks for any help.

link to the demo and download

Answer 1

you could modify your css to set the colorOver and colorOut classes for each li like:

.first.colorOver { background-color: #31b8da; } 
.first.colorOut { background-color: #1f1f1f; }

and use Francois Wahl's toggleClass option:

 $("#sidebar ul#menu li").on("hover", function(){
     $(this).toggleClass("colorOver", "colorOut");
 });

then you can set colors for each li easily.