a:hover style does not affect after adding cufon

Question

I have the following code that worked perfectly before adding cufon in the HTML:

<div id="pageNumbers" class="fl">
<ul>
<li id="selected"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div> <!-- end pageNumbers -->


#pageNumbers a:hover
{
  color:#FFF;
  height:26px;
  width:27px;
  padding: 5px 12px 5px 11px;
}

But after adding cufon in the in the HTML it doesn't work. The question is how can I make cufon understand and apply my style?

Thanks in advance!

Answer 1

According to the Cufon API, hover is turned off by default to improve performance. So you need to turn hover on for any elements that need to be drawn differently on hover.

This can be done using the following code:

Cufon.replace('#pageNumbers a', {
    hover: true
});