jQuery .css 颜色更改不起作用答案

【问题标题】：jQuery .css color change not workingjQuery .css 颜色更改不起作用
【发布时间】：2012-02-13 17:02:02
【问题描述】：

我正在尝试更改 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/

【问题讨论】：

$(this) 应该是什么？因为，在您的代码中，看起来 $(this) 引用了一个 ul 元素。如果你想处理这个 ul 的 li，恐怕你的代码是错误的......
你能提供 JSFiddle 吗？您的代码看起来有效。
你能告诉我们你想要达到什么目标吗？
我不确定您的具体问题，但请学习并养成链接您的 jQuery 语句的习惯，例如$(this).addClass('selected').css("color","white");请参阅ejohn.org/blog/ultra-chaining-with-jquery 阅读起来更简洁，而且效率更高——每个 $(..) 构造一个新的 jquery 对象，重新找到该对象等。重复该工作没有任何意义。另外——好奇你在一种情况下使用 css({color: '#FFF'}) 而在另一种情况下使用 css("color", "white") ——这些是同一件事，在 3 行内表达不同是很奇怪的彼此...
当你指定它应该变成白色$('#lava li').css({color: '#FFF'});时，所有文本变成黑色怎么可能是正确的？

标签： jquery css colors mouseleave

【解决方案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');

});

【讨论】：

我不同意我希望在运行 .mouseleave 时我希望它保持在它所在的最后一个 li 上，因此您可以通过该代码看到它反弹回 .selected @Tomm跨度>
呃……你把我弄丢了。您想在鼠标悬停后激活菜单项吗？但是假设您在主页上，并且您将鼠标悬停在“成为合作伙伴”上但不点击它，您仍然在主页上。为什么您还要将“成为合作伙伴”链接标记为选中？

【解决方案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));

【讨论】：

【解决方案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
    });
});

【讨论】：

你能提供更多代码来使用吗，比如你的 html 或者你想要的示例？我还没有完全理解你的问题。