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

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

color: '#af1217 !important'

Answer 2

当您尝试执行基本文本输出之外的任何操作时，我也遇到了 cufon 出现问题。它也可能变慢，需要资源。

我强烈建议尝试改用@font-face，它可以正常工作，听 css 和所有 js 免费/更快。

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

Answer 3

破解它的伴侣！

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 4

其实你需要做的是：

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 字体的忠实粉丝。

Answer 5

Cufon 不喜欢对一个元素应用多种样式。因此，使用 :not 选择器仅将第一个 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 
});