Superfish + Cufon Hover [英] Superfish + Cufon Hover

问题描述

对于这个wordpress-site： http://bit.ly/NlBv9I 我使用推拉门进行圆润角落和cufon的字体。
当我想添加一个下拉菜单时，我遇到了diensten-tab悬停的问题。当我从子菜单底部离开子菜单时，我的主项目将不会恢复正常样式。使用superfish onHide函数我设法解决了这个问题，但现在当我将主项目悬停到子菜单时，主项目的颜色会变为背景颜色（因此它变得不可见）。我尝试使用onBeforeShow函数解决这个问题，但是这有效，但这破坏了我的第一个解决方案。

For this wordpress-site: http://bit.ly/NlBv9I I use sliding doors for the rounded corners and cufon for the font. When I wanted to add a dropdown-menu, I ran into a problem with the hover of the "diensten"-tab. When I left the sub-menu through the bottom of the submenu my main-item wouldn't go back to normal styling. With the superfish onHide function I managed to fix this, but now when I hover out the main item to the submenu, the main item's color changes to the background color (so it becomes invisible). I tried to fix this with the onBeforeShow function and that works, but that breaks my first solution.

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

You can find the HTML here: 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') }
            });

提前致谢！

推荐答案

我认为你应该使用

Cufon.refresh();

当您使用 Cufon字体时，您需要更改任何样式后使用 Cufon.refresh（），例如，您使用了 addClass（'gray'）并且该类将灰色应用于字体，但如果您在更改后未使用 Cufon.refresh（）然后你看不到变化。换句话说，在使用 Cufon font 动态更改任何元素的字体样式后，你必须使用 Cufon.refresh（）; 生效。

When you are using Cufon font you need to use Cufon.refresh() after you change any style, say, you have used addClass('gray') and that class applies gray color to the font but if you don't use Cufon.refresh() after you change the class then you can't see the change. In other words, after changing the font style of any element dynamically that are using Cufon font you have to use Cufon.refresh(); to take effect.

这篇关于Superfish + Cufon Hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！