Removing a hover effect from a revisited page with back button

Question

I'm working on this website, and have a little thorn in my side. When I click a link in the sticky note on this page, then hit the back button, the link still appears to be hovered-over.

What would be the least script-intensive way to prevent the link from thinking it's still being hovered over? The problem appears in Safari, Firefox, and Opera, but not in IE8 or Chrome. Tested on both Mac and Windows with same results (excepting IE8, of course... Windows only.)

I was thinking that it would probably be not efficient to attach any kind of mouseover event to the document, since it would fire quite often, unless I sorely misunderstand the way events bubble up through the DOM.

Here's some javascript and html source if you don't want to wade through what I've linked you to:

/* Link hover effects */

//Fix Opera quirk:
$('.tooltip a').css('left', '0px');

// jQuery hover, animating color smoothly.
// If it's in the #tooltip, bump it to the right 5 pixels while hovered.
$('a').hover(function(){
    if ($(this).is('.tooltip a')) {
        $(this).stop().animate({
            color: '#D42B1D',
            left:  5
        },{
            duration: 'fast'
        });
    } else {
        $(this).stop().animate({color: '#D42B1D'},{
            duration: 'fast'
        });
    }
},function(){
    if ($(this).is('.tooltip a')) {
        $(this).stop().animate({
            color: '#005B7F',
            left:  0
        },{
            duration: 600
        });
    } else {
        $(this).stop().animate({color: '#005B7F'},{
            duration: 600
        });
    }
});


--------------------------------------------------


    <div class="tooltip transp">
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="news.php">News / Events</a></li>
            <li><a href="location.php">Contact Us</a></li>
            <li><a href="directions.php" target="_blank">Directions</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>

Answer 1

Can't give a you a quickfix but a suggestion. Just try to edit your code for a use of mouseenter und mouseleave events. As of jQuery 1.4.1 the hover event can be specified (mapping to "mouseenter mouseleave"). In most cases this works better.

Tested Code

Works for me.

$('.tooltip').delegate('a', 'mouseenter', function() {

    $(this).stop().animate({
        color: '#D42B1D',
        left:  '5px'
        },{
            duration: 'fast'
    });

});

$('.tooltip').delegate('a', 'mouseleave', function() {

    $(this).animate({
        color: '#005B7F',
        left:  '0'
    },{
        duration: 'fast'
    });

});

Answer 2

This will get rid of your problem.

$(window).bind('beforeunload', function(){

     $('a.tooltip').css({color: '#005B7F', left:  0});

});

However I would ask yourself if all this js is worth it for something that can mostly be achieved using css and the :hover pseudo class.