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

});

但是当老鼠离开了它将所有文本更改为黑色，这是正确的，但 $(this) 不会更改为白色

这里是代码和工作演示的副本

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

该代码几乎肯定不正确。他们的关键字“this”是一种神奇的野兽，它可以以令习惯其他语言的程序员非常惊讶的方式发生变化。

首先阅读本文以了解“this”是什么以及它是如何修改的。

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

然后使用jquery函数代理( http://api.jquery.com/jQuery.proxy/) 将“this”封装到函数中。

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

尝试让它在每个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
    });
});