Cufon Nested Hover Problem

Question

When using multiple lists and hover states the 'parent' Cufon style replaces the child. In the following example, when you hover the Second Level link it will be replaced by a different weight.

Is there an option I can set so that the nested style stays the same or is this a bug/limitation within 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 first: Use selectors which don't create matches where the set of elements overlap.

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

---

Explanation why your selectors + Cufon create problems

The problem seems to originate from you selectors.

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

This means you have actually specified the fontWeight twice for the second-level <a>-tags. Sadly Cufon doesn't seem to apply only the expression which has the highest CSS specificity thus the behavior will depend on how Cufon internally stores multiple matches like this one.

After a few tests it seems that Cufon applies the styles in the reverse order you call the replace() statements in. e.g.

If you do

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

All links will appear blue and the 2nd-level-links have fontWeight 700 until hovered, then they get fontWeight 200 set.

If you switch the order

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

Initially all links will have fontWeight 200, the 2nd-level-links will get 700 set when hovered.

You notice the behavior changes depending on the order of your calls.

---

Uncertainty

I don't know Cufon and I don't really understand what you are trying to do. Especially I'm not sure if you mean to use the options passed in to Cufon as you do or if you actually mean to just set fontWeight when hovering.

There is a difference between

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

and

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

The first sets fontWeight to 200 and if the element is hovered also sets the fontWeight to 200, which would only be noticeable if the fontWeight changed in the meantime.

The latter only changes the style of the element to fontWeight 200 while hovered and removes the weight when the element is no longer hovered.

I'm not sure which one you intend to use.