Cufon hover doesn't work

I know this post is old but for anybody who stumbles across this post with the same problem.. I was having this problem too and I changed the doctype to STRICT like mentioned above and used ’’ around true:

Cufon.replace('h1', {hover: 'true'});

This works for me.

CadenGrant said
I know this post is old but for anybody who stumbles across this post with the same problem.. I was having this problem too and I changed the doctype to STRICT like mentioned above and used ’’ around true:

Cufon.replace('h1', {hover: 'true'});

This works for me.

Works for me too!!

I didn’t read through the 3 pages of responses, so maybe someone already posted this but I was able to get the hover to work when I placed it at the top of the list.

-> Cufon.replace(’#nav’, {hover: true}); Cufon.replace(’#nav’);

From what I’ve read, Cufon reads the script bottom up…

Raylay’s found the solution. Cufon specs indicate that you DO need to have a strict DOCTYPE , but they also say:

“Note: the hover option cannot be added to an element that has been replaced before. To make it work you must reverse the order of your replace calls (i.e. hover calls must go first).”

in the table entry for Hover on this page of the API documentation

https://github.com/sorccu/cufon/wiki/API

Once I discovered this and put my hover call first, it started working for me. (I already had the strict doctype).

Here’s what my code looked like. The comment software filters out the script tags, so I’ve put in notes where they should go.

<!— If you want to use complex selectors with Cufón, load a selector engine (JavaScript framework) here. We support jQuery, Sizzle, MooTools, Dojo, Prototype and other popular frameworks. —>

script line that includes jquery

script line that includes cufon-yui.js

script line that includes my .font.js file

script type open

Cufon.replace(‘h1’); // Works without a selector engine

Cufon.replace(’#menu ul li a’, { hover: true });

Cufon.replace(’#menu ul li a’); // Requires a selector engine for IE 6 -7, see above

script type close

I’ve tried all the above suggestions and none of them worked. I tried and tried to get it working and this is what i came up with

<ul id="mainmenu">
    <li>
        <a href="#">Alex</a>
    </li>
    <li class="active">
        <a href="#">James</a>
    </li> 
    <li>
        <a href="#">Thomas</a>
    </li>
</ul>

$(document).ready(function() {

  Cufon('ul#mainmenu li.active a', {
    hover: { color: '#3e3e3e'},
    color: '#af1217',
  });

  Cufon('ul#mainmenu li a', {
    hover: { color: '#3e3e3e'},
    color: '#868686',
  });

  Cufon.replace('ul#mainmenu li', {
    color: '#868686',
  });

  Cufon.replace('ul#mainmenu li.active a', {
    color: '#af1217',
  });    

});

See it working…

You’re welcome…

Not sure if anyone would still be having an issue with this, but here is what I did…

<script src="<?php bloginfo('template_directory'); ?>/js/fonts/cufon-yui.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/fonts/Bebas_Neue_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4', {
hover: true,
});
</script>

This is very useful post, thanks for this. i have searched earlier for the same. And i have confusion on the following, ype=”text/javascript”></script> <script type=”text/javascript”> Cufon.replace(‘h1,h2,h3,h4’, { plz explain. by buy youtube subscribers