Question

I have the following css applied to the corresponding html snippet. I would like to set it so that it changes color on mouseover. I haven’t a clue how this is done correctly… can someone please enlighten me? Thanks!

CSS:

$('#vertical_menu li').each(function(){

    $(this).mouseout(function(){
        $(this).css('color','#1c479e');
    });
});

$('#vertical_menu li').each(function(){

    $(this).mouseout(function(){
        $(this).css('color','#c42026');
    });
}); 

HTML:

<ul id="vertical_menu">
    <li id="ccfl">Fort Lauderdale</li>
    <li id="ccbr">Boca Raton</li>
    <li id="ccbw">Boca (Sandalfoot)</li>
    <li id="ccbb">Boynton Beach</li>
    <li id="ccke">FL Keys</li>
    <li id="cchw">Hollywood</li>
    <li id="ccpl">Plantation</li>
    <li id="ccwb">Webcast</li>
</ul>

OR….. am I incorrect in removing the simple achor tags to accomplish this? I also need to add an active state when the item is clicked, and I figure since I’ll do that through jQuery, I can set the rollover the same way…

Am I approaching this all wrong?

Thanks for your time.

Kenny

Answer 1

This can be accomplished with pure CSS, no JavaScript or jQuery is needed:

#vertical_menu li:hover
{
    color: red;
}

Here’s a working fiddle.