Question

the title pretty much explains it. Please note that this is a WebKit-specific issue (at least I have narrowed it down to that, as FireFox presents absolutely no issues). This issue was tested on Chrome 8.0.552.224 and Safari 5.0.2.

I have this HTML structure:

<li class="buttonArea"> <span class="buttonHighlight"></span>
    <a href="#" class="button">PRE-ORDER</a>
    <a href="#" class="buttonTag">Got a Coupon Code?</a>
    <span class="buttonBG"></span> 
    <!-- Rainbow background -->
</li>

I have created a jQuery function that adds a class to a.button when it is hovered over and when it’s being focused. Here’s how:

$(document).ready(function () { /* ///// start DOM ready ///// */
    /** Big button hover/active effects **/
    $('a.button').hover(function () {
        $(this).toggleClass('button-hover');
    });
    $('.button').focus(function () {
        $(this).toggleClass('button-active');
        Cufon.replace('.button-active');
    });
}); /* ///// end DOM ready ///// */

The button-hover class is added; however, the button-active is not. Even if I remove the Cufon.replace line it doesn’t work. Apparently, there is already a ticket on the jQuery site which mentions this WebKit-related issue (http://bugs.jquery.com/ticket/3332), yet I hope that your genius minds can help me!

Answer 1

Anyway, thanks to the help of a good friend of mine and some tweaking, we’ve found the solution. This is cross-browser compatible and I hope it helps anybody else:

$('.button').hover(function () {
    $(this).addClass('button-hover');
    $(this).mousedown(function () {
        $(this).addClass('button-active');
        Cufon.replace('.button-active');
        $(this).mouseup(function () {
            $(this).removeClass('button-active');
            Cufon.replace('.button');
        });
    });
}, function () {
    $(this).removeClass('button-hover');
});