jquery - Cufon Nested Hover Problem -

Using multiple lists and hovering says that 'parent' Cufon transforms style child following examples In, when you hover the second level link, it will be replaced by a different weight.

Is there any alternative that nested style remains the same or is this bug / border within Cufon?

  & lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Top level & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Top level & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Top level & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Second level & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Second level & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Second level & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Top level & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Top level & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://github.com/sorccu/cufon/raw/master/js/cufon.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://github.com/sorccu/cufon/raw/master/fonts/Vegur.font.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; Cufon.replace ('ul li a', {hover: true, fontWight: 200}); Cufon.replace ('ul li ul a', {hover: truth, fontite: 700}); & Lt; / Script & gt;  

Firstly the solution: Use selectors who do not Make matches where the set of elements overlaps.

  // only selects the first level link Cufon.replace ('ul: has (ul)> li a', {hover: true, fontWight: 200}); // Only the second level link selects Cufon.replace ('ul: not (: (ul)) a', {hover: true, fontWeight: 700});  

---

Explain why your selectors + make cephalon problems

The problem arises from your selectors.

  ul li - - & lt; A & gt; Selects all 8 versions of ULLU-A - & gt; & Lt; A & gt; Selects only 3-second-level frequencies of  

This means that you actually have the second level & lt; A & gt; -Tags for fontWeight has been mentioned twice is regrettable that Cufon does not apply the expression only, which is higher, the behavior will depend on whether the Cufon internal form How to store many matches in this way.

After some tests, it seems that Cufon reverse order changes you to () in the statements. E.g.

If you

  Cufon.replace ('ul li a', {hover: true, font width: 200}); Cufon.replace ('ul li ul a', {hover: truth, fontite: 700});  

All links will appear in blue and the font near the second level link will focus up to 700, then they will get 200 sets of fonts.

If you switch order

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

Initially the font will be 200 200 in all links, 2-level-link will get 700 sets.

You say the behavior change according to your order.

Uncertainty

I do not know what Qufon and I really do not understand what you I'm not particularly sure that if you use the option made by you, in the cufon or if it really means that you set the fall, then when the time is slipping When

there is a difference

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

and

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

200 from the first set and if the element is pressed, sets the font from 200 to 200, which is the fontWeight Changed in that time

Later only converts the element to fontWight 200, while the element is no longer kept.

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