Javascript 使用“后退”按钮从重新访问的页面中删除悬停效果
我在这个网站上工作，我的身体有点不舒服。当我点击便笺上的一个链接，然后点击后退按钮时，该链接似乎仍然悬停在上面 什么是最不需要脚本的方式来防止链接认为它仍在悬停？这个问题出现在Safari、Firefox和Opera中，但不在IE8或Chrome中。在Mac和Windows上测试，结果相同（当然IE8除外……仅限Windows） 我在想，将任何类型的mouseover事件附加到文档中可能是没有效率的，因为它会经常触发，除非我严重误解了事件在DOM中冒泡的方式 这里有一些javascript和html源代码，如果您不想涉猎我链接到的内容：Javascript 使用“后退”按钮从重新访问的页面中删除悬停效果,javascript,jquery,dom,hover,hyperlink,Javascript,Jquery,Dom,Hover,Hyperlink,我在这个网站上工作，我的身体有点不舒服。当我点击便笺上的一个链接，然后点击后退按钮时，该链接似乎仍然悬停在上面 什么是最不需要脚本的方式来防止链接认为它仍在悬停？这个问题出现在Safari、Firefox和Opera中，但不在IE8或Chrome中。在Mac和Windows上测试，结果相同（当然IE8除外……仅限Windows） 我在想，将任何类型的mouseover事件附加到文档中可能是没有效率的，因为它会经常触发，除非我严重误解了事件在DOM中冒泡的方式 这里有一些javascript和ht
/* 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>
/*链接悬停效果*/
//修复歌剧怪癖：
$（'.tooltipa'）.css（'left'，'0px'）；
//jQuery悬停，平滑设置颜色动画。
//如果在#工具提示中，则在悬停时将其向右撞击5像素。
$（'a'）。悬停（函数（）{
如果（$（this）.is（'.tooltipa'））{
$（this）.stop（）.animate({
颜色：“#D42B1D”，
左：5
},{
持续时间：“快速”
});
}否则{
$（this.stop（）.animate（{color:'#D42B1D'}{
持续时间：“快速”
});
}
}，函数（）{
如果（$（this）.is（'.tooltipa'））{
$（this）.stop（）.animate({
颜色：“#005B7F”，
左：0
},{
持续时间：600
});
}否则{
$（this.stop（）.animate（{color:'#005B7F'}{
持续时间：600
});
}
});
--------------------------------------------------
$('.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'
});
});
这将解决你的问题
$(window).bind('beforeunload', function(){
$('a.tooltip').css({color: '#005B7F', left: 0});
});
然而，我会问自己，如果所有这些js都是值得的，那么使用css和：hover伪类可以实现这些功能。我感谢您的帮助，但是hasClass（）只有在所讨论的元素属于类时才起作用。。。在本例中，我想看看它的父级是否有一个类。我刚刚估计.is（'.tooltip a'）比.parent（）.hasClass（'tooltip'）短。此外，不幸的是，返回页面后，mouseenter和mouseleave事件无法解决问题，即使通过.live（）附加。但是，我再次感谢你的帮助！是的，我知道。但不是delegate（）imho支持的所有事件。如果我错了，请纠正我。上面的代码是一个巨大的资源消耗，因为每个元素mouseover/leave都会触发函数。delegate优先于.live，它不会在文档中冒泡，因为您可以指定侦听事件的容器，例如$（'.tooltip'）。delegate（'a'，'mouseleave'，function…）@gearsdigital delegate具有与live一样多的支持。您确定吗<代码>$（'.tooltip'）。委托（'a'，'mouseenter'，function（）{对我不起作用。
$（'.tooltip a'）。live（'mouseenter'，function（）{