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

Posted 2023-03-06

【中文标题】Cufon - 悬停效果和活动菜单项的问题

【英文标题】：Cufon - problem with hover effects and active menu items

【发布时间】：2011-07-01 07:10:41

【问题描述】：

我创建了一个使用 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
);

【参考方案1】：

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

color: '#af1217 !important'

【讨论】：

为什么不尝试使用“普通”css，使用ul#mainmenu li.activecolor::#af1217 !important。我在某处读到 Cufon 在某些情况下不接受 !important。

【参考方案2】：

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

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

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

【讨论】：

我选择使用 cufon 是因为它支持特殊的样式效果（阴影、渐变色等）。我不知道@font-face 是否支持这种效果。

嗨@ktsixit查看上面的my 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'...

【讨论】：

花了我一段时间，但我讨厌被打败。广而告之，看来这是一个普遍的问题。

【参考方案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 字体的忠实粉丝。

【参考方案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 
);