鼠标离开视口时如何使 JQuery .hover() 工作？答案

【问题标题】：How to make JQuery .hover() work when mouse leaves viewport?鼠标离开视口时如何使 JQuery .hover() 工作？
【发布时间】：2011-07-22 08:44:38
【问题描述】：

以下代码将在视口的最顶部放置一个 div。

预期的行为是：

当用户将鼠标悬停在 div 上，然后向上移动鼠标直到光标移出视口时，应在控制台中记录“悬停”消息。问题是控制台没有记录任何内容。

当鼠标离开视口时，如何让 JQuery .hover() 将某些内容记录到控制台？

<body style="margin: 0; padding: 0;">
  <div class="foo" style="background-color: blue; width: 100px; height: 100px;">
    Test
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

  <script>

    $(".foo").hover(function(){
        console.log("hover in");
    }, function(){
        console.log("hover out");
    });

   </script>

【问题讨论】：

问题在于这段代码你的身体里没有其他东西，所以 foo 被拉伸到整个身体，永远不会离开它。在正文中添加更多内容，它应该可以工作。
你的确切代码对我来说很好 -> jsfiddle.net/banksbiz/GXHhf
我同意 Banx。 Firebug 的控制台正在被完美写入。
Jerone，在问题中给出的源代码示例中，指定了div的宽度和高度，因此div没有像您建议的那样拉伸到整个身体。
Banx，我认为我的代码没有像你说的那样工作。请尝试制作一个包含代码的 html 文档，您应该能够复制该问题。当 div 与视口顶部齐平时会出现此问题。

标签： javascript jquery hover viewport jquery-hover

【解决方案1】：

使用mouseover 和mouseout 而不是hover 似乎可以解决这个问题。

$(".foo").mouseover(function(){
    console.log("hover in");
});

$(".foo").mouseout(function(){
    console.log("hover out");
});

See it in action here.

请注意，如果浏览器窗口周围没有镶边，即使这样也不起作用。例如，当我最大化 FF4 或将其置于全屏模式时，浏览器窗口的边缘与我的屏幕边缘齐平，因此在这种情况下光标无处可移到 div 的左侧，因此 mouseout事件永远不会触发。

【讨论】：

感谢您的示例，但正如我的问题所说，我需要它与 .hover() 一起使用。我的示例是一个简单的测试用例，但“真实”代码是用于依赖 .hover() 的下拉菜单
@edt 抱歉，没有意识到当您询问如何让hover() 工作时，您对其他选项持开放态度；您可能想在问题中明确说明这一点。这可能是个问题，因为据我所知，mouseenter 和mouseleave 仅在鼠标指针从另一个元素进入/离开一个元素时才会触发。在这种情况下，当 div 与浏览器视口齐平时，该元素是 null，因此永远不会触发事件。请注意，hover 只是绑定了mouseenter 和mouseleave。
除了hover 选项之外，是否添加了mouseover 和mouseout 处理程序？处理鼠标移出浏览器的特殊情况？
看这个updated fiddle - 我不会说这是最终的解决方案；似乎可能有一些特殊情况，由于您提到这只是一个玩具示例，这甚至可能不可行。
除了悬停之外，我还尝试输入 mouseout 处理程序，但结果是无法将鼠标悬停在下拉链接上（当您将鼠标移出其父级时，它们会消失）。我尝试将 mouseout 处理程序添加到 body、ul、li 等，但没有成功。我发现从 JQuery 1.5.1 切换到 1.4.4 解决了这个问题并向 JQuery 提交了错误报告

【解决方案2】：

解决方法是将 JQuery 版本从 1.5.1 更改为 1.4.4。不是一个好的解决方案，但它有效。

【讨论】：

非常有趣！你有链接到你遇到这个的地方吗？还是只是试错？
这只是反复试验。可以在此页面顶部看到工作下拉菜单：goo.gl/oSeYz
O..k，您可能应该将域名放在某处而不是缩短的链接，这样就不会有人在他们的工作场所跟踪它时遇到麻烦！或者至少将其限定为轻微的 NSFW :)