Question

我正在使用一些非常标准的JavaScript / jQuery来处理悬停元素，图像交换，滑动div，动画等等，这没关系。如果/当点击“可悬空的”链接元素带您进入新页面时， mouseenter 悬停状态始终坚持。

例如，如果您将鼠标悬停在某个内容上并单击它（链接到另一个页面），然后使用后退按钮返回到该页面，您单击的元素上的 mouseenter 状态将被卡住即使你的鼠标不再在元素上。

您必须重新加载页面或重新悬停元素才能重置所有内容。

$(document).ready(function() {
    $('.mySelector').each(function () {
        $(this).hover(enter, leave);
    });

    function enter(event) { 
        // mouseenter stuff
    };
    function leave(event) { 
        // mouseleave stuff
    };
});

几周前我似乎记得读过这篇文章并且有一个非常简单的修复，但我再也找不到了。

有人熟悉正确的解决方案吗？

感谢信！

Answer 1

您无需使用.each。此外，这些功能应该在.ready之外。

$(document).ready(function() {
    $('.mySelector').hover(enter, leave);
});

function enter(event) { 
    // mouseenter stuff
}

function leave(event) { 
    // mouseleave stuff
}

编辑：如果你的变量是本地的，你可以这样做：

$(document).ready(function() {
     $('.mySelector').hover(function(){
         // mouseenter stuff
     },
     function(){
         // mouseleave stuff
     });
});

Answer 2

我最后通过在“卸载”窗口中调用鼠标离开功能简单地“重新设置”悬停效果......

$(window).unload(function() {
    leave();
});

每当您通过单击悬停元素离开页面时，即使鼠标仍悬停在元素上，也会调用 mouseleave 函数。点击浏览器的后退按钮不再会带您回到“卡住”悬停效果的页面。

问题解决了。

离开页面时悬停状态会粘滞 - 忽略鼠标离开

2 个答案: