Cufon Nested Hover Problem

Question

Quando si utilizzano più elenchi e si passa con il mouse, lo stile Cufon "genitore" sostituisce il figlio. Nel seguente esempio, quando si passa con il mouse sul collegamento di secondo livello, questo verrà sostituito da un peso diverso.

Esiste un'opzione che posso impostare in modo che lo stile nidificato rimanga lo stesso o sia un bug / limitazione all'interno di 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

Soluzione prima: usa i selettori che non creano corrispondenze in cui l'insieme di elementi si sovrappone.

//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});

---

Spiegazione del motivo per cui i selettori + Cufon creano problemi

Il problema sembra provenire da te selettori.

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

Ciò significa che hai effettivamente specificato fontWeight due volte per i tag di secondo livello <a> -. Purtroppo Cufon non sembra applicare solo l'espressione che ha la più alta specificità CSS quindi il comportamento dipenderà da come Cufon memorizza internamente più corrispondenze come questa.

Dopo alcuni test sembra che Cufon applichi gli stili nell'ordine inverso in cui chiamate le replace() istruzioni. ad esempio

Se lo fai

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

Tutti i collegamenti appariranno in blu e i collegamenti di 2 ° livello hanno fontWeight 700 fino al passaggio del mouse, quindi ottengono fontWeight 200 impostato.

Se si cambia l'ordine

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

Inizialmente tutti i collegamenti avranno fontWeight 200, i collegamenti di 2 ° livello avranno 700 impostati quando si passa con il mouse.

Si nota che il comportamento cambia in base all'ordine delle chiamate.

---

Incertezza

Non conosco Cufon e non capisco davvero cosa stai cercando di fare. Soprattutto non sono sicuro se intendi utilizzare le opzioni passate a Cufon come fai tu o se in realtà intendi semplicemente impostare fontWeight durante il passaggio del mouse.

C'è una differenza tra

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

e

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

Il primo imposta <=> su 200 e se l'elemento è in bilico imposta anche fontWeight su 200, il che sarebbe evidente solo se nel frattempo <=> fosse cambiato.

Quest'ultimo cambia lo stile dell'elemento in <=> 200 mentre è in bilico e rimuove il peso quando l'elemento non è più in bilico.

Non sono sicuro di quale si intende utilizzare.