Question

对于这个wordpress-site：http://bit.ly/NlBv9I我使用滑动门作为圆角，并使用cufon作为字体。当我想添加一个下拉菜单时，我遇到了“diensten”-tab悬停的问题。当我从子菜单底部离开子菜单时，我的主项目将不会恢复正常样式。使用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') }
            });

提前致谢！

Answer 1

我认为你应该使用

Cufon.refresh();

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

Superfish + Cufon Hover

1 个答案: