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!


Digg This
Reddit This
Stumble Now!
Share on Facebook
Bookmark this on Delicious
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Buzz this!


Printed from: http://www.divydovy.com/2010/04/cufon-hover-fix/. © divydovy 2014

57 Comments   »

Trackbacks/Pingbacks

  1. color del texto del menu principal en el tema kingsize

RSS feed for comments on this post , TrackBack URI

Leave a Reply