当鼠标离开视口时如何使JQuery .hover()工作?

edt*_*edt 1 javascript jquery viewport hover jquery-hover

下面的代码将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>
Run Code Online (Sandbox Code Playgroud)

no.*_*ing 8

使用mouseovermouseout不是hover似乎修复它.

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

$(".foo").mouseout(function(){
    console.log("hover out");
});
Run Code Online (Sandbox Code Playgroud)

在这里看到它.

请注意,如果浏览器窗口周围没有镶边,即使这样也行不通.例如,当我最大化FF4或将其置于全屏模式时,浏览器窗口的边缘与我的屏幕边缘齐平,因此在这种情况下光标无法转到div的左侧,因此鼠标移动事件永远不会开火.