Problème de vol stationnaire imbriqué en Cufon

Question

Lors de l’utilisation de plusieurs listes et survols, le style Cufon 'parent' remplace l’enfant. Dans l'exemple suivant, lorsque vous passez la souris sur le lien de second niveau, il sera remplacé par un poids différent.

Existe-t-il une option que je puisse définir pour que le style imbriqué reste identique ou s'agit-il d'un bogue / d'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

La solution d'abord: utilisez des sélecteurs qui ne créent pas de correspondance lorsque 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 des raisons pour lesquelles vos sélecteurs + Cufon créent des problèmes

Le problème semble provenir de vos 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 en fait spécifié deux fois les fontWeight pour les balises <a> - de second niveau. Malheureusement, Cufon ne semble pas appliquer uniquement l'expression qui présente la spécificité CSS la plus élevée donc le comportement dépendra de la manière dont Cufon stocke en interne plusieurs correspondances comme celle-ci.

Après quelques tests, il semble que Cufon applique les styles dans l'ordre inverse des opérations replace(), par exemple.

Si vous le faites

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 les liens de niveau 2 ont fontWeight 700 jusqu'à leur survol, puis ils sont définis dans fontWeight 200.

Si vous changez l'ordre

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

Initialement, tous les liens auront fontWeight 200, les liens de second niveau recevront 700 lorsqu'ils seront survolés.

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

Incertitude

Je ne connais pas Cufon et je ne comprends pas vraiment ce que vous essayez de faire. En particulier, je ne sais pas si vous souhaitez utiliser les options transmises à Cufon comme vous le faites ou si vous souhaitez simplement définir le paramètre fontWeight lors du survol.

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

Le premier définit <=> à 200 et si l'élément est survolé, la valeur de fontWeight est également définie sur 200, ce qui ne sera perceptible que si <<> est modifié entre-temps.

Ce dernier modifie uniquement le style de l'élément sur <=> 200 lors du survol et supprime le poids lorsque l'élément n'est plus survolé.

Je ne sais pas lequel vous envisagez d'utiliser.