Add Hover Effect to Cufon

enod — Tue, 28 Jun 2011 22:32:36 +0000

Cufón is an image replacement technique for achieving rich typography in a website. The best things about it are the impressive speed, quality rendering and the fact that it only requires JavaScript enabled in the viewer’s browser.

We can just specify the hover color on our js code

Cufon(‘#urSelector’, {
hover: {
color: ‘#fdc900;’
}
});
Cufon.replace(‘#urSelector’, {hover: true});
Cufon.replace(‘#urSelector’, {fontFamily: ‘MyFont’});

But I don’t like to add another block of code just to change another hover effect for another element.
So lets make use of the css :hover. Just add to hover color in your css file

Cufon.replace(‘#urSelector’, {hover: true});
Cufon.replace(‘#urSelector’, {fontFamily: ‘MyFont’});

We could even shorten this more

Cufon.replace(‘#urSelector’, { hover: true, fontFamily: ‘MyFont’ });

That’s it. You now have a working hover effect for Cufon.

Reynold Salceda

Add Hover Effect to Cufon