将鼠标悬停在父元素上的 Cufon

Question

这就是我所拥有的：http://thezoomer.net/clubroyale/

我在 .nav-item 内的 a 元素上应用了 Cufon

Cufon.replace('.nav-item a', {fontFamily: 'Yanone Kaffeesatz',
                                    hover:true,
                                    hoverables: { li:true }
                                    });

这就是我在菜单中的内容

<li class="nav-item"><a href="./">HOME</a></li>

这就是我在 css 中的内容

.nav-item{
     color: #a8956c;
     background-color:#fff;
     cursor:pointer;

    white-space:nowrap;
}   
.nav-item:hover{
     color: #fff;
     background-color:#a8956c;

}

显然，我希望 CSS 悬停工作。我知道它在这种状态下不起作用，因为 Cufon 已将刷新绑定到 a 元素而不是整个父元素（从 css 绑定）。但是，如果我将 css 应用于 .nav-item a，则悬停将起作用，但仅适用于菜单元素的一部分。

另外，我尝试在没有 a 的情况下在 .nav-item 上应用 Cufon，悬停可以正常工作，但有些 Cufon 会绘制一些奇怪的空白，而无需这样做。 p>

那么，是否有类似 hoverables: { parent:true } 的元素也可以从父元素接收悬停事件？

谢谢！

Answer 1

这似乎按预期工作：

JS：

Cufon.replace('.nav-item a', { fontFamily: 'Yanone Kaffeesatz', hover: true });

CSS：

.nav-item a {
    color: #a8956c;
}

.nav-item a:hover {
    color: #fff;
}