Cufon Nested Hover Problème

Question

Lors de l'utilisation de plusieurs listes et états de survol, le style Cufon 'parent' remplace l'enfant. Dans l'exemple suivant, lorsque vous survolez le lien Deuxième niveau, il sera remplacé par un poids différent.

Y at-il une option que je peux définir pour que le style imbriqué reste le même ou est-ce un bug/une limitation dans 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

Solution première: utiliser des sélecteurs qui ne créent pas de matchs où l'ensemble des éléments se chevauchent.

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

---

Explication pourquoi vos sélecteurs + CUFON créer des problèmes

Le problème semble provenir de vous sélecteurs.

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

Cela signifie que vous avez effectivement précisé le fontWeight deux fois pour le deuxième niveau <a> -tags. Malheureusement, Cufon ne semble pas appliquer uniquement l'expression qui a le plus haut CSS specificity donc le comportement dépendra de la façon dont Cufon stocke en interne plusieurs matchs comme celui-ci. Après quelques tests, il semble que Cufon applique les styles dans l'ordre inverse que vous appelez les instructions replace() dans, par exemple.

Si vous

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

Tous les liens apparaissent en bleu et le 2e niveau des liens ont fontWeight 700 jusqu'à plané, ils obtiennent 200 fontWeight ensemble.

Si vous passez l'ordre

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

Dans un premier temps tous les liens auront fontWeight 200, le 2e niveau entre les chaînes 700 obtenir ensemble lors de son survol.

Vous remarquez que le comportement change en fonction de l'ordre de vos appels.

---

Incertitude

Je ne sais pas Cufon et je ne comprends pas vraiment ce que vous essayez de faire. Surtout que je ne suis pas sûr si vous voulez utiliser les options passées à Cufon comme vous le faites ou si vous voulez simplement définir fontWeight en planant.

Il y a une différence entre

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

et

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

Les premiers ensembles fontWeight à 200 et si l'élément est plané fixe également le fontWeight à 200, ce qui ne serait perceptible si la fontWeight changé entre-temps. Ce dernier ne fait que changer le style de l'élément en fontWeight 200 lorsqu'il est plané et supprime le poids lorsque l'élément n'est plus plané.

Je ne sais pas lequel vous avez l'intention d'utiliser.