:hover text color gets stuck on dropdown menu

[miesc]

Hi, I have a dropdown menu on my site together with cufon. However, most of times when I mouse over the menu elements, the :hover get's stuck on the blue color, when it should be white.
The website is www.samiranda-legal.com/beta/

Any help would be much appreciated.
Thanks

[sorccu]

Hi,

Please see #10 at https://github.com/sorccu/cufon/wiki/FAQ

Simo

On Apr 23, 2012, at 3:18 AM, miesc wrote:

Hi, I have a dropdown menu on my site together with cufon. However, most of times when I mouse over the menu elements, the :hover get's stuck on the blue color, when it should be white.
The website is www.samiranda-legal.com/beta/

Any help would be much appreciated.
Thanks

---

Reply to this email directly or view it on GitHub:
#241

[miesc]

Hi Sorccu,
First of all, thank you for taking the time to reply to my question.

However when I 1st posted my question I had already read and implemented what is mentioned on the FAQs answer number 10. At the time it only solved the problem to the menu items that don't have dropdowns, such as "Partnerships", "Prizes", "Quality" and Contacts, but it didn't solve the problem to LegalDNA and Team, because those have dropdowns.

Any further help will be greatly appreciated!

Many thanks,

[glassdimly]

I fixed this by specifying both the hover color and the not-hover color in the Cufon.replace function like so:

Cufon.replace('.menu-item a',{hover: true, color:'#768692', hover:{color:'#404040'}  });
Cufon('.current-menu-item a', {color:'#404040'} ); 

Cufon default is to get values from the stylesheet when just {hover:true} is set. This obviously was creating some sort of problem/bug, so setting both the hover and the color above worked for me. Mind the parens and the quotes, now. They're tricksy.

To break it down:

• '.menu-item a' is the selector on which to enable this Cufon font. Because I don't specify a font family, this defaults to the last Cufon font loaded. If an italic or bold Cufon font is specified for the last font loaded and italic or bold is specified in the CSS stylesheet for this element, Cufon will load the bold or italic font specified.
• hover:true turns on hover for this cufon element
  color: '#xxxxxx' specifies the the color for not-hover, overriding the value set in the stylesheet
• hover:{color: '#xxxxxx'} specifies the hover color, overriding the value set in the stylesheet.
• Cufon() takes the first argument as a selector, and the second is CSS to apply to that selector. So that's the active menu item color. Basically, this is a way of adding CSS via Cufon. Little thanks to the documentation.

This page was very helpful: https://github.com/sorccu/cufon/wiki/API
And the usage page was as well: https://github.com/sorccu/cufon/wiki/Usage

But I had to dig around and experiment to fix this problem.