这就是我所拥有的: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将刷新与一个元素绑定,而不是整个父元素(从css绑定)。但是,如果我将css应用于 .nav-item a ,则悬停将起作用,但仅适用于菜单元素的部分。
另外,我尝试在没有 a 的情况下在 .nav-item 上应用Cufon,悬停工作但是有些Cufon不必绘制一些奇怪的空格。
那么,是否有像hoverables:{parent:true}这样的元素来接收来自父元素的悬停事件?
谢谢!
答案 0 :(得分:2)
这似乎按预期工作:
JS:
Cufon.replace('.nav-item a', { fontFamily: 'Yanone Kaffeesatz', hover: true });
CSS:
.nav-item a {
color: #a8956c;
}
.nav-item a:hover {
color: #fff;
}