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**](http://www.wbudublin.com/new/), 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>

```