0

我正在使用以下代码尝试获取导航链接的字体颜色以在悬停/关闭悬停时进行动画处理。边框底部颜色正确更改，但字体颜色没有。它还抛弃了我的当前菜单项 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');
    })
4

1 回答 1

0

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

'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 字体，它可以是动画或保留 Cufon 字体，只需在悬停时将字体颜色从白色变为蓝色，而不是动画。

于 2012-06-15T12:59:28.550 回答