Problema de desplazamiento de Cufon anidado

Question

Cuando se usan varias listas y estados de desplazamiento, el estilo Cufon 'padre' reemplaza al hijo. En el siguiente ejemplo, cuando pasa el cursor sobre el segundo nivel, será reemplazado por un peso diferente.

¿Hay alguna opción que pueda configurar para que el estilo anidado permanezca igual o es un error / limitación dentro de 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

Solución primero: use selectores que no creen coincidencias donde el conjunto de elementos se superpongan.

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

---

Explicación de por qué sus selectores + Cufon crean problemas

El problema parece originarse en sus selectores.

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

Esto significa que en realidad ha especificado fontWeight dos veces para las etiquetas <a> de segundo nivel. Lamentablemente, Cufon no parece aplicar solo la expresión que tiene la especificidad CSS por lo tanto, el comportamiento dependerá de cómo Cufon almacena internamente múltiples coincidencias como esta.

Después de algunas pruebas, parece que Cufon aplica los estilos en el orden inverso al que llama las declaraciones replace(). por ejemplo,

Si lo haces

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

Todos los enlaces aparecerán en azul y los enlaces de segundo nivel tienen fontWeight 700 hasta que se ciernen, luego se configuran fontWeight 200.

Si cambia el orden

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

Inicialmente, todos los enlaces tendrán fontWeight 200, los enlaces de segundo nivel obtendrán 700 cuando se ciernen.

Observa que el comportamiento cambia según el orden de sus llamadas.

---

Incertidumbre

No conozco a Cufon y realmente no entiendo lo que estás tratando de hacer. Especialmente, no estoy seguro de si quieres usar las opciones pasadas a Cufon como lo haces o si en realidad solo quieres establecer fontWeight cuando pases el cursor.

Hay una diferencia entre

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

y

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

El primero establece <=> en 200 y si el elemento está suspendido también establece fontWeight en 200, lo que solo sería notable si <=> cambiara mientras tanto.

Este último solo cambia el estilo del elemento a <=> 200 mientras está suspendido y elimina el peso cuando el elemento ya no está suspendido.

No estoy seguro de cuál piensa usar.