Cufon Nested Hover Problem

Question

Ao usar várias listas e pairar afirma o estilo Cufon 'pai' substitui a criança. No exemplo a seguir, quando você passa o link Segundo Nível ele será substituído por um peso diferente.

Existe uma opção que eu posso definir para que as estadias estilo aninhado o mesmo ou isso é um bug / limitação dentro 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

Solução primeiro:. Usar seletores que não criam jogos onde o conjunto de elementos se sobrepõem

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

---

Explicação porque seus seletores + Cufon criar problemas

O problema parece se originar de você seletores.

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

Isso significa que você realmente especificou o fontWeight duas vezes para o segundo nível <a>-tags. Infelizmente Cufon não parece aplicar-se apenas a expressão que tem a maior CSS especificidade , assim, o comportamento vai depender de como Cufon armazena internamente vários jogos como este.

Depois de alguns testes, parece que Cufon aplica os estilos na ordem inversa você chama as declarações replace() em. Por exemplo.

Se você fizer

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

Todos os links aparecem em azul e os de 2º nível ligações têm fontWeight 700 até pairou, então eles ficam fontWeight 200 set.

Se você mudar a ordem

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

Inicialmente, todos os links terão fontWeight 200, as de 2º nível-links terá 700 set, quando pairou.

Você percebe as mudanças de comportamento, dependendo da ordem das suas chamadas.

---

Incerteza

Eu não sei Cufon e eu realmente não entendo o que você está tentando fazer. Especialmente eu não tenho certeza se você quer dizer usar as opções passadas para Cufon como você faz ou se você realmente quer dizer apenas definir fontWeight quando pairando.

Há uma diferença entre

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

e

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

Os primeiros conjuntos fontWeight a 200 e se o elemento é passado também define o fontWeight a 200, o que só seria perceptível se o fontWeight entretanto alterados.

O último só muda o estilo do elemento para fontWeight 200 enquanto pairavam e remove o peso quando o elemento não é mais pairavam.

Eu não tenho certeza qual deles você pretende usar.