Cufon Nested Hover Problem

Question

Wenn mehrere Listen mit und schweben Staaten der ‚Eltern‘ Cufon Stil das Kind ersetzt. Im folgende Beispiel, wenn Sie den Second Level Link schweben wird es durch ein anderes Gewicht ersetzt werden.

Gibt es eine Möglichkeit kann ich so eingestellt, dass das verschachtelte Format gleich bleibt oder ist das ein Bug / Begrenzung innerhalb 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

Lösung zuerst:. Verwenden Sie Selektoren, die Streichhölzer nicht schaffen, in dem die Menge der Elemente überlappen

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

---

Erklärung, warum Ihre Selektoren + Cufon Probleme erstellen

Das Problem scheint von Ihnen Selektoren stammen.

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

Dies bedeutet, dass Sie tatsächlich die fontWeight zweimal für die <a>-Tags der zweiten Ebene festgelegt haben. Leider Cufon scheint nicht nur den Ausdruck anzuwenden, die die höchste hat CSS Spezifität so wird das Verhalten davon abhängen, wie Cufon speichert intern mehrere Übereinstimmungen wie dieser.

Nach einigen Tests scheint es, dass Cufon die Stile in der umgekehrten Reihenfolge gilt, um die replace() Aussagen in anrufen. Z.

Wenn Sie das tun

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

Alle Links erscheinen blau und die 2nd-Level-Links haben 700 bis fontweight schwebte, dann bekommen sie 200 fontweight Satz.

Wenn Sie schalten den Auftrag

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

Zunächst werden alle Verbindungen haben fontweight 200, die 2nd-Level-Links 700 Set erhalten, wenn schwebt.

Sie beachten Sie die Verhaltensänderungen in der Größenordnung von Anrufen abhängig.

---

Die Unsicherheit

Ich weiß Cufon nicht und ich verstehe nicht wirklich, was Sie zu tun versuchen. Vor allem bin ich nicht sicher, ob Sie bedeuten die Optionen in zu Cufon weitergegeben verwenden, wie Sie tun, oder wenn Sie tatsächlich bedeuten nur gesetzt, wenn fontweight schweben.

Es gibt einen Unterschied zwischen

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

und

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

Die ersten Sätze fontWeight bis 200, und wenn das Element schwebt ist, so setzt auch den fontweight bis 200, die nur spürbar wäre, wenn die fontWeight in der Zwischenzeit geändert.

Letzteres ändert sich nur die Art des Elements 200 fontWeight während schwebte und entfernt das Gewicht, wenn das Element nicht mehr schwebte.

Ich bin mir nicht sicher, welchen Sie verwenden möchten.