CODEWITHSUNDEEP
jquerycsscolorsmouseleave
RussellHarrower
RussellHarrower

Reputation: 6820

jQuery .css color change not working

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/

Upvotes: 4

Views: 20857

Answers (3)

Tomm
Tomm

Reputation: 2142

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

});

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22580

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

Upvotes: 0

Danack
Danack

Reputation: 25721

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

Upvotes: 0

Related Questions