JQuery .css изменение цвета не работает

Question

Я пытаюсь изменить цвет моего текста на моем меню LavaLamp Я использую следующий плагин http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery

То, что я сделал это следующий

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

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

}); 

однако когда мышь покидает он меняет весь текст на черный, который является правильным, но тогда $ (это) не меняются на белый

здесь является копией коды и рабочим дем

http://jsfiddle.net/aSr3J/

Answer 1

Я полагаю, что вы после этого:

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

По сути ваша функция MouseLeave бы должны выглядеть так

$('#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});  

}); 

Обратите внимание, что я также добавил определение цвета для ссылок в таблице стилей:

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

(Вы знаете, что заключая блочные элементы, такие как li в инлайн-элементах, таких как a действительно только в HTML5 ?)

Что касается цвета текста меню я также внесены изменения в $('#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

Код почти наверняка неверен. Они ключевое слово «это» - волшебное зверь, который может измениться способами, которые очень удивляют программистов, используемых для других языков.

Сначала прочитайте это, чтобы понять, что это такое и как оно изменяется.

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

И затем использовать функцию прокси Jquery (http://api.jquery.com/jQuery.proxy/) инкапсулировать «это» через функции.

$('#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

Попробуйте сделать это изменить цвет на парении каждого литий

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