Cufon嵌套悬停问题

Question

当使用多个列表和悬停状态时，“父”Cufon样式将替换该子项。在以下示例中，当您悬停第二级链接时，它将被替换为不同的权重。

有没有我可以设置的选项，以便嵌套样式保持不变或这是Cufon中的错误/限制吗？

<ul> 
    <li><a href="#">Top Level</a></li> 
    <li><a href="#">Top Level</a></li> 
    <li><a href="#">Top Level</a><ul> 
     <li><a href="#">Second Level</a></li> 
     <li><a href="#">Second Level</a></li> 
     <li><a href="#">Second Level</a></li> 
    </ul> 
    <li><a href="#">Top Level</a></li> 
    <li><a href="#">Top Level</a></li> 
</ul> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://github.com/sorccu/cufon/raw/master/js/cufon.js"></script> 
<script type="text/javascript" src="http://github.com/sorccu/cufon/raw/master/fonts/Vegur.font.js"></script> 


<script type="text/javascript"> 
    Cufon.replace('ul li a',{hover: true, fontWeight: 200}); 
    Cufon.replace('ul li ul a',{hover: true, fontWeight: 700}); 
</script> 

Answer 1

解决方案第一：不创造一个集合中元素的重叠使用火柴选择。

//selects only 1st level links 
Cufon.replace('ul:has(ul) > li a', { hover: true, fontWeight: 200}); 
//selects only 2nd level links 
Cufon.replace('ul:not(:has(ul)) a', { hover: true, fontWeight: 700}); 

---

解释为什么你选择+的Cufón产生问题

这个问题似乎从你选择发起。

ul li a --> selects all 8 occurrences of <a> 
ul li ul a --> selects only the 3 second-level occurrences of <a> 

这意味着你实际上已经指定了fontWeight两次二级<a>标签都有效。可悲的是，Cufon似乎并不仅仅适用于具有最高的表达，因此这种行为将取决于Cufon如何在内部存储像这样的多个匹配。

经过一些测试后，Cufon似乎以相反的顺序应用样式，您可以在其中调用replace()语句。

如果你

Cufon.replace('ul li a',{hover: true, fontWeight: 200}); 
Cufon.replace('ul li ul a',{hover: true, fontWeight: 700}); 

所有的链接将显示蓝色，而2级链路具有fontWeight设置700，直到盘旋，然后他们得到fontWeight设置200组。

如果切换顺序

Cufon.replace('ul li ul a',{hover: true, fontWeight: 700}); 
Cufon.replace('ul li a',{hover: true, fontWeight: 200}); 

最初的各个环节都会有fontWeight设置200，徘徊在2级链接将获得700集。

您注意到行为的变化取决于您的通话顺序。

---

不确定性

我不知道的Cufón，我真的不明白你正在尝试做的。特别是我不确定是否要像使用传递给Cufon的选项一样使用，或者实际上是否意味着在悬停时设置fontWeight。

存在第一组fontWeight至200，并且如果元件也徘徊

Cufon.replace('ul li a', { hover: true, fontWeight: 200 }); 

和

Cufon.replace('ul li a', { 
    hover: { fontWeight: 200 } 
}); 

之间的差设置fontWeight设置为200，这将仅是明显的，如果fontWeight在此期间改变。

后者仅将元素的样式更改为fontWeight 200，同时徘徊并在元素不再徘徊时删除重量。

我不确定你打算使用哪一个。