Cufon - 悬停效果和活动菜单项的问题

Question

我用cufon字体创建了一个菜单。

我决定在菜单项上应用以下样式：

• 正常：灰色文字
• 悬停：黑色文字
• 活动：红色文字

问题是，将（红色）活动菜单项悬停，结果将其变回灰色（并使其看起来像任何其他“普通”菜单项）。 我不明白为什么，你能帮我解决一下吗？

这是当前的cufon配置：

Cufon.replace('ul#mainmenu li > a', {
    color: '#868686',
    fontFamily: 'pfbeau',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
    hover: {
        color: '#3e3e3e'
    }
});
Cufon.replace('ul#mainmenu li.active > a', {
    color: '#af1217',
    fontFamily: 'pfbeau',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
    hover: false
});

Answer 1

破解了它的伙计！

Cufon('ul#mainmenu li.active a', {
hover: { color: '#3e3e3e'},
    color: '#af1217',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon('ul#mainmenu li a', {
    hover: { color: '#3e3e3e'},
    color: '#868686',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon.replace('ul#mainmenu li', {
    color: '#868686',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});

Cufon.replace('ul#mainmenu li.active a', {
    color: '#af1217',
    fontFamily: 'BlackBeard',
    fontSize: '15px',
    textShadow: '0 2px 0.1em #fff',
});    

看看这个！ - http://jsfiddle.net/3Yf4G/2/

用你的字体替换'BlackBeard'字体......

Answer 2

实际上，你需要做的是：

Cufon.replace('#THE-NAME-OF-YOUR-DIV', { hover: true });

然后只需设置来自style.css的悬停效果或任何模板css。 此外，您可以创建代表当前页面突出显示的菜单项：

CSS：

#THE-NAME-OF-YOUR-MENU-DIV ul li a:hover,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-item > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-parent > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-ancestor > a,
#THE-NAME-OF-YOUR-MENU-DIV ul li:hover > a {
  color: #73c8ff;
}

Cufon代码：

Cufon.replace('#THE-NAME-OF-YOUR-MENU-DIV', { hover: true });

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-item > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-parent > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li.current-menu-ancestor > a', {
    color: '#73C8FF',
});

Cufon('#THE-NAME-OF-YOUR-MENU-DIV ul li:hover > a', {
    color: '#73C8FF',
});

这实际上对我有效多次。 我已经能够用cufon解决大多数问题。 一个问题令我感到不安的是我发现你是否需要斜体或粗体斜体字体，有时候.js文件或某些东西导致Cufon将所有东西都设置为斜体。 因此，基本上有时候使选项具有斜体可以使所有内容都显示为斜体。 否则，没有问题，后者很少发生，但是持续存在。 总的来说，我是Cufon Fonts的忠实粉丝。

Answer 3

Cufon不喜欢将多种样式应用于元素。 因此，使用：not selector仅将第一个cufon替换应用于那些不是.active类的子代的锚标记...

Cufon.replace('ul#mainmenu li:not(.active) > a', { 
    color: '#868686', 
    fontFamily: 'pfbeau', 
    fontSize: '15px', 
    textShadow: '0 2px 0.1em #fff', 
    hover: { 
        color: '#3e3e3e' 
    } 
}); 
Cufon.replace('ul#mainmenu li.active > a', { 
    color: '#af1217', 
    fontFamily: 'pfbeau', 
    fontSize: '15px', 
    textShadow: '0 2px 0.1em #fff', 
    hover: false 
}); 

Answer 4

尝试将红色活动颜色设置为！important。

color: '#af1217 !important'

Answer 5

当你尝试做除基本文本输出之外的任何事情时，我也遇到过cufon表现的问题。 它也可能变慢，这对资源要求很高。

我强烈建议尝试使用@ font-face，它可以像它应该的那样工作，监听css，以及所有js free / faster。

http://www.fontsquirrel.com/fontface/generator