JQuery.css color change not working

Question

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

I did 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 $ (this) does not change to white

here is a copy of the code and a working demo

http://jsfiddle.net/aSr3J/

Answer 1

I assume you are behind this:

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

Essentially, your mouseleave function should 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 also added a color definition for the links in the stylesheet:

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

(Did you know that including block-level elements like li in inline elements like a is only allowed in HTML5?)

Regarding the color of the menu text, I also made changes to $('#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'); }); 

Answer 2

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

Read this first to understand what 'this' is and how it changes.

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

And then use the jquery proxy (http://api.jquery.com/jQuery.proxy/) to encapsulate 'this' into 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)); 

Answer 3

Try changing the color on hovering 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 }); });