超级鱼 + Cufon 悬停答案

【问题标题】：Superfish + Cufon Hover超级鱼 + Cufon 悬停
【发布时间】：2012-07-13 17:58:00
【问题描述】：

对于这个 wordpress 网站：http://bit.ly/NlBv9I 我使用滑动门作为圆角，使用 cufon 作为字体。当我想添加一个下拉菜单时，我遇到了悬停“diensten”选项卡的问题。当我通过子菜单底部离开子菜单时，我的主要项目不会恢复正常样式。使用 superfish onHide 功能我设法解决了这个问题，但是现在当我将主项目悬停到子菜单时，主项目的颜色变为背景颜色（因此它变得不可见）。我尝试使用 onBeforeShow 函数来解决这个问题并且它有效，但这打破了我的第一个解决方案。

您可以在此处找到 HTML：http://bit.ly/NlBv9I

CSS：

ul {
    list-style:none;
    margin-bottom: 6px;
}

#main-nav li {
    float: left;
    margin-right: 2px;
    display: block;
}

#main-nav li a {
    color:#6f6f6f;
    font-size: 15px;
    padding: 4px;
    display: block;
    text-decoration: none;
}
#main-nav li.sfHover a {
    color:#fff;
}
#main-nav li:hover a, #main-nav li.current_page_item a, #main-nav li.current-menu-item a {
    color:#fff;
}
#main-nav li a:hover, #main-nav li.current_page_item a, #main-nav li.current-menu-item a {
    background: url(img/leftDoor.png) top left no-repeat;
}
#main-nav li:hover, #main-nav li.current_page_item, #main-nav li.current-menu-item {
    background: url(img/rightDoor.png) top right no-repeat;
}
#main-nav ul li.sfHover, #main-nav ul li.sfHover li  {
    background: url(img/rightDoor.png) top right no-repeat;
}
#main-nav ul li.sfHover a {
    background: url(img/leftDoor.png) top left no-repeat;
}
#main-nav ul.sub-menu a {
    color:#fff;
}
#main-nav .grey {
    color:#6f6f6f !important;
}
#main-nav .white {
    color:#fff !important;
}

JQuery:

$('#top .menu').superfish({
                    hoverClass:    'sfHover',
                autoArrows: false,
                delay:0,
                /*onBeforeShow: function() { $(this).prev().addClass('white'); },*/
                onHide: function() { $(this).prev().addClass('grey') }
            });

提前致谢！

【问题讨论】：

标签： jquery cufon superfish

【解决方案1】：

我认为你应该使用

Cufon.refresh();

当您使用Cufon font 时，您需要在更改任何样式后使用Cufon.refresh()，例如，您使用了addClass('gray')，并且该类将gray color 应用于字体，但如果您不使用@987654326 @更改课程后，您将看不到更改。换句话说，在动态改变任何使用Cufon font的元素的字体样式后，您必须使用Cufon.refresh();才能生效。

【讨论】：