Cufon + jQuery hover not working

Question

Alright, here's the problem:

I'm building a website, utilizing jQuery and Cufon. I'm having a problem with using jQuery's .hover() function alongside Cufon. When I hover over the Cufon'd text, nothing happens. The code of importance is:

Cufon.replace('div.nav', {hover:'true'});
$(document).ready(function() {
    $('div.nav').each(function() {
        $(this).hover(function() {
            $(this).css({
                "text-decoration": "underline;",
            });
        },
        function() {
            $(this).css({
                "text-decoration": "none;",
            });
        });
    });
});

and

<div id="nav">
    <div id="logo" class="nav">
        SLA ROBOTICS
    </div>
    <div id="items">
        <div id="item1" class="navbutton nav">
            <i>members</i>
        </div>
        <div id="item2" class="navbutton nav">
            <i>robots</i>
        </div>
        <div id="item3" class="navbutton nav">
            <i>sponsors</i>
        </div>
    </div>
</div>

The rest of the code is visible by viewing the source of the above link. No PHP, so everything's visible.

Answer 1

Cufon is a fine library, but it may not support all features of normal text. Consider using webfonts, generated by Font Squirrel.