jQuery .css color change not working

Question

I am trying to change the color of my text on my lavalamp menu I am using the following plugin http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery

What I have done is the following

 $('#lava').mouseleave(function () {

    $('#lava li').removeClass('selected');  
     $('#lava li').css({color: '#FFF'});  
    //select the current item
    $(this).addClass('selected');  
    $(this).css("color", "white");     

});

however when the mouse leaves it changes all the text to black which is correct but then the $(this) does not change to white

here is a copy of the code and working demo

http://jsfiddle.net/aSr3J/

Solution

I suppose what you're after is this:

http://jsfiddle.net/aSr3J/20/

Essentially your mouseleave function would have to look like this

$('#lava').mouseleave(function () {

    left = Math.round($(".selected").offset().left - $('#lava').offset().left);
    width = $(".selected").width();

    //Set the floating bar position, width and transition
    $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});   
    $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});      

});

Note that I have also added a color definition for the links in the style sheet:

#lava ul a li {  color:#fff; }

(Are you aware that enclosing block-level elements like li in inline-elements like a is only valid in HTML5?)

As for the color of the menu text I have also amended the $('#lava li').hover(function ()):

   $('#lava li').hover(function () {

    //Get the position and width of the menu item
    left = Math.round($(this).offset().left - $('#lava').offset().left);
    width = $(this).width();
    $(this).css("color","black");

    //Set the floating bar position, width and transition
    $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});   
    $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});    

//if user click on the menu
},function() { $(this).css("color","white");}).click(function () {

    //reset the selected item
    $('#lava li').removeClass('selected');  

    //select the current item
    $(this).addClass('selected');

});

Comments

[SpYk3HH]

can ya gimmie more code to work with, like your html and maybe an example of what you want? I dont quite understand your problem fully yet.

[RussellHarrower]

I disagree I want when the .mouseleave is ran I want it to stay on the last li it was on, so as you can see by that code it bounces back to the .selected @Tomm

[Tomm]

Err... you lost me. You want to have the menu item activated after the mouse hovered over it? But suppose you're on the homepage and you hover over 'Become a partner' but don't click it, you're still on the homepage. Why would you then want to mark the 'Become a partner' link as selected?