Cufon :hover Fix

Just a quick post. I have implemented cufon for a client’s website to replace the titles with a nice new non-web-safe font.

This code worked perfectly to replace the titles with the new font.


Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });

However, the client then asked for one of the titles (which was a link within an h3) to have a hover effect to show that it was a link. Fortunately cufon now supports :hover, so I was pleased to be able to implement this without resorting to separate JavaScript.

However, for the life of me I couldn’t get the hover effect to work!


Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon('#twitter-3 .widgettitle a', {
hover: {
color: 'aqua'
}
});

I had the right selector, the right syntax, everything. Finally, as a last resort, I scrapped the original code (top code excerpt to leave just the :hover replacement). Finally, it worked. So, I simply re-added the title replacement under the link :hover replacement, as below:


Cufon('#twitter-3 .widgettitle a', {
hover: {
color: 'aqua'
}
});
Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });

Hey presto – it worked 🙂 It seems that cufon works back up your list of rules in reverse, so the h3 general replacement was overwriting the specific h3 anchor hover lines! It took me a while to work this out, so hopefully this’ll help someone else.

Add a comment if you like – I’m sure the code above could be further optimised.

UPDATE

According to Rein (see comments below), cufon hover will only work on anchor (<a>) tags. I haven’t tested that theory myself, but worth a note here – don’t want to be the cause of lost time!

55 Comments

  1. Cheers, I have just started Cufon, and this was the missing factor to why my hovers weren’t working.

    All I had to do was reverse the order.

    Thank you

  2. Thanks for that it worked for me but what I needed to do was to duplicate the styling at the bottom again to make sure it retained it on load.

    GREAT!

  3. Wow!! was pulling my hair out for quite a while before I found this. What a weirdly simple solution — finally that hover state works w/ Cufon. Many thanks.

  4. Maybe another good tip to share in your article above is that it only works on <a> tags! I tried it with a for an hour but finally found out it only worked on <a> tags!

  5. Excellent fix. I scratched my head over this a couple of times, but thanks God i stumbled on this fix.

    Awesome work, you have my sincerest thanks and admiration.

  6. If it is still not working for You, try putting the:
    Cufon(‘#twitter-3 .widgettitle a’, {
    hover: {
    color: ‘aqua’
    }
    });

    in random positions, I had to put it at the very beginning of the code

    good luck

  7. Hi Tony,

    Yes, good point, Cufon is very sensitive to where all the calls/scripts go. Here’s my checklist (order is DOM order – important!:

    HEAD
    – CSS file link (including the style: .cufon-loading { visibility:hidden !important } to stop FOUC
    – Cufon YUI js file
    – Cufon font js file
    – Cufon declarations (i.e. The elements to replace fonts for – as detailed in this post)

    FOOTER (just before
    – Cufon.now(); function call to assist IE behaviour

    Note: I use jQuery selectors with Cufon and find that it’s fine to call jQuery.js just before the body close tag (improves overall page load performance), whereas the Cufon js files seem to need to be in the HEAD as above.

  8. @HasanG: Refreshing Cufon by using a timer is a really bad idea for several reasons and especially when you are doing it on the whole page. Ever heard of performance?

  9. Hi, I know this is an old blog post, but just wanted to say thanks, I was scratching my head wondering why my code wasnt working.

  10. Thank you SO much for posting this fix.

    I just started exploring cufon today as an alternative to sIFR. The hover state problem was driving me crazy–particularly in IE. Finding your solution makes me feel better about the hour I spent at work trying to fix this. Many, many thanks!

  11. You can do like this:

    Cufon.replace(‘#menuContainer ul#nav li a’, {hover:true});

    This works !

  12. Hi Ses,

    That’ll work to make any element hoverable, but does it also make the :hover CSS colour work?

    Cool if it does, seems like a neat and tidy solution.

  13. Sir,

    Will you please show us demo for this because we people are confuse still…
    So, we are requesting you please..

  14. Thanks a lot…sir…I was stuck due to this in one of my company project….really thanks for this great help…. 🙂

Comments are closed.