Cufonネストホバー問題

Question

複数のリストとホバー状態を使用する場合、「親」のCufonスタイルが子を置き換えます。次の例では、第2レベルのリンクにカーソルを合わせると、別のウェイトに置き換えられます。

ネストされたスタイルが同じままになるように設定できるオプションはありますか、これは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});

---

セレクターとCufonが問題を引き起こす理由の説明

問題はセレクターに起因するようです。

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

これは、第2レベルのfontWeightタグに対して<a>を実際に2回指定したことを意味します。悲しいことに、Cufonは CSSの特異性が最も高い式のみを適用しているようには見えません。 a>したがって、動作は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セットになります。

コールの順序に応じて動作が変わることに気付きます。

---

不確実性

私はCufonを知らず、あなたが何をしようとしているのか本当に理解していません。特に、Cufonに渡されたオプションをそのまま使用するのか、実際にホバリング時にfontWeightを設定するだけなのかはわかりません。

違いがあります

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

and

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

最初は<=>を200に設定し、要素がホバーされている場合はfontWeightも200に設定します。これは、その間に<=>が変更された場合にのみ顕著です。

後者では、要素のスタイルがホバーされている間のみ<=> 200に変更され、要素がホバーされなくなったときにウェイトが削除されます。

どちらを使用するつもりかわかりません。