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

CREDED IT MATE！

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

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

color: '#af1217 !important'

Answer 4

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

我强烈建议尝试使用@ font-face，它可以正常工作，听css，以及所有js free / faster。

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

Answer 5

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 
});

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

5 个答案: