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，同時徘徊並在元素不再徘徊時刪除重量。

我不確定你打算使用哪一個。