About design and nearby

Cufón.js and Hover Effect

Posted: March 8th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , , | 2 Comments »

One of the problems for Cufon developers is the strange behaviour of elements powered by Cufon.js which have defined :hover state in the CSS stylesheet. I stumbled upon this and tried so many different things to make it work the correct way… My

  1. .cufon a:hover {color:#e7aa05;}

had no results, so after reading the official docs I set hover option for the certain element at the very beginning of my file – sure, after loading my custom Cufon script. The key phrase for the solution is ‘hover calls must go first’, because the hover option cannot be added to an element that has been replaced before:

  1. <script type="text/javascript"> // should be called in the first place
  2.     Cufon.replace('a.cufon', {
  3.         color: '#222',
  4.         hover: {
  5.             color: '#e7aa05'
  6.         }
  7.     });
  8. </script>
  9. <script type="text/javascript"> // should be called after
  10.     Cufon.replace(".cufon", {
  11.         textShadow: '1px 1px 1px white'
  12.     });    
  13. </script>

Live example: check the example >>

Related post: Using Non-standard Fonts with Cufón.js
Related post: Using Cufón.js with jCarousel

Share Button

Check Related Posts:

2 Comments on “Cufón.js and Hover Effect”

  1. 1 Matt said at 7:24 pm on October 30th, 2012:
    Reply  |  Quote

    Thank you for sharing this! I’ve spent the last few hours trying to find a working solution to the problem of Cufon hover effects and yours was the only to suggest putting the hover calls first!

    Thank you so much! You gave me back the rest of my day!

  2. 2 Tom said at 6:26 pm on December 29th, 2012:
    Reply  |  Quote

    Thanks 4 this, finally working solution! Its working perfectly!


Leave a Reply


  • 9 × four =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now