Question

我正在使用以下代码尝试获取导航链接的字体颜色，以便在悬停/关闭悬停时设置动画。边框底部颜色正确更改但字体颜色不正确。此外，它正在抛弃我当前菜单项CSS规则的不同颜色。所需的行为是字体颜色在悬停时变为蓝色并恢复为关闭悬停的白色，除非它是当前菜单项，应该是字体颜色为黄色。我是新手，所以请原谅我缺乏风格。我已经包含了用于颜色支持的jQuery UI文件。任何帮助是极大的赞赏。这里可以看到完整的示例http://www.buenolisto.com/alma

JS

        jQuery("li.social").hover(function(){
        jQuery(this).find("img").stop(true, true).animate({'marginTop': "-=20px"}, 'fast');
    }, function(){
        jQuery(this).find("img").stop(true, true).animate({'marginTop': "+=20px"}, 'fast');
    })
    jQuery("li.reservas").hover(function(){
        jQuery(this).find("img").stop(true, true).fadeOut({'marginTop': "-=30px"}, 'slow');
    }, function(){
        jQuery(this).find("img").stop(true, true).fadeIn({'marginTop': "+=30px"}, 'slow');
    })
    jQuery('ul.menu li a').hover(function() {
        jQuery(this).stop(true, true).animate({'borderBottomColor': "#2E9ECE",'color': "#FEFEFE"}, 'slow');
    }, function() {
        jQuery(this).stop(true, true).animate({'borderBottomColor': "#FFDF85",'color': "#2E9ECE"}, 'fast');
    })

Answer 1

回答关于字体颜色的一部分。颜色是错误的方式！

'color':'#2E9ECE'应位于.hover()内的第一个函数中，#FEFEFE应位于第二个函数中。

完整更新的代码应为：

jQuery('ul.menu li a').hover(function() {
    jQuery(this).stop(true, true).animate({borderBottomColor:'#2E9ECE', color:'#2E9ECE'}, 'slow');
    Cufon.refresh(this);
}, function() {
    jQuery(this).stop(true, true).animate({borderBottomColor:'#FFDF85', color:'#FEFEFE'}, 'fast');
    Cufon.refresh(this);
})

注意：使用animate({})语法，您无需引用属性。

编辑：问题的第二部分：

要从悬停代码中排除当前选定的菜单项，您可以将jQuery选择器更新为.not()包含带有current-menu-item类的列表项

jQuery('ul li a:not(.current-menu-item)').hover(...)

应修复问题的第二部分。

编辑2：由于您使用Cufon来渲染字体，因此您需要在设置使用jQuery后刷新它，否则它将以文本最初的颜色呈现（这是白色的）。向这两个方法添加Cufon.refresh(this);可能会产生一些影响，但由于您未提供可编辑的源代码，因此无法对其进行测试。

在阅读完这篇文章之后，我不认为Cufon字体可以设置动画 - 请参阅https://groups.google.com/forum/?fromgroups#!topic/cufon/RFfz6DDY0wU所以你应该使用CSS3 fonts，这可以是动画或保留Cufon字体，只需要字体颜色在悬停时从白色变为蓝色，而不是动画。

悬停时jQuery字体颜色动画不起作用

1 个答案: