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/

What is $(this) supposed to be ? Because, form your code, it looks like $(this) refer to a ul element. If you want to work on a li of this ul, I'm afraid, your code is wrong... — Jibou, Jan 18 '12 at 23:52
I am not sure about your specific issue, but please learn to and get in the habit of chaining your jQuery statements, e.g. $(this).addClass('selected').css("color","white"); see http://ejohn.org/blog/ultra-chaining-with-jquery/ It is much cleaner to read AND it is far more efficient -- each $(..) constructs a new jquery object, re-finds the object, etc. No sense in duplicating that work. Also -- curious that you use css({color: '#FFF'}) in one case and css("color", "white") in another -- these are the same thing, it's odd to express differently within 3 lines of each other... — jwl, Jan 18 '12 at 23:54
How can it be correct that all the text turns to black when you specify that it should turn to white `$('#lava li').css({color: '#FFF'});`? — Tomm, Jan 18 '12 at 23:55

Tomm · Accepted Answer · 2012-01-19T00:49:53.823

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');

});

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 — RussellHarrower, Jan 19 '12 at 03:10
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? — Tomm, Jan 19 '12 at 20:58

score 0 · Answer 2 · answered Jan 19 '12 at 00:01

The code is almost certainly not correct. They keyword 'this' is a magical beast which can change in ways that are very suprising to programmers used to other languages.

First read this to understand what 'this' is and how it gets modified.

http://howtonode.org/what-is-this

And then use the jquery function proxy (http://api.jquery.com/jQuery.proxy/) to encapsulate 'this' through to the function.

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

}, this));

score 0 · Answer 3 · answered Jan 19 '12 at 00:01

Try to make it change color on the hover of each li

// the follow preforms for loop on your li's
$("#lava li").each(function(i) {
        // this is the "hover" function, aka, mouseenter and mouseleave
    $(this).hover(function(eIn) { // this function allows you to do stuff while mouse is over object
        $(this).addClass('selected').css("color", "#FFF"); // FFF is white
    },
    function(eOut) { // this allows you to do stuff when mouse leaves object
        $(this).removeClass('selected').css("color", "#000"); // 000 is black
    });
});

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. — SpYk3HH, Jan 19 '12 at 00:37

jQuery .css color change not working

3 Answers3