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!