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伪类来实现。

Answer 2

不能给你一个quickfix但是一个建议。只是尝试编辑代码以使用mouseenter和mouseleave事件。从jQuery 1.4.1开始，可以指定悬停事件（映射到“mouseenter mouseleave”）。在大多数情况下，这样做效果更好。

经过测试的代码

适合我。

$('.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'
    });

});

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

2 个答案:

经过测试的代码