javascript - 使用后退按钮从重新访问的页面中删除悬停效果

Question

我在这个网站上工作，我的身边有点刺。当我单击 this page 上的便签中的链接时，然后点击后退按钮，链接仍显示为悬停状态。

要防止链接认为它仍在悬停，脚本密集度最低的方法是什么？该问题出现在 Safari、Firefox 和 Opera 中，但不会出现在 IE8 或 Chrome 中。在 Mac 和 Windows 上测试，结果相同(IE8 除外，当然……仅限 Windows。)

我在想，将任何类型的鼠标悬停事件附加到文档可能效率不高，因为它会经常触发，除非我严重误解了事件通过 DOM 冒泡的方式。

如果你不想费力地浏览我链接到的内容，这里有一些 javascript 和 html 源代码:

/* 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

这将解决您的问题。

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

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

});

但是我会问自己，所有这些 js 是否值得，因为大多数情况下可以使用 css 和 :hover 伪类来实现。