离开页面时悬停状态保持不变 - 忽略 mouseleave

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即使您的鼠标仍然悬停在该元素上， 函数也会被调用。点击浏览器的后退按钮不再会将您带回具有“卡住”悬停效果的页面。

问题已解决。