Question

以下代码将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>

Answer 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的左侧，因此鼠标移动事件永远不会开火。

Answer 2

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

当鼠标离开视口时如何使JQuery .hover（）工作？

2 个答案: