1

以下のコードは、ビュー ポートの最上部に 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>

4

2 に答える 2

8

mouseoverandmouseoutの代わりに使用するとhover、修正されるようです。

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

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

実際の動作はこちらでご覧ください。

ブラウザウィンドウの周りにクロムがない場合、これでも機能しないことに注意してください。たとえば、FF4 を最大化するか、フル スクリーン モードにすると、ブラウザ ウィンドウの端が画面の端と同じ高さになるため、カーソルが div の左側に移動する場所がないため、マウスアウトイベントは発生しません。

于 2011-03-24T19:08:35.080 に答える
3

解決策は、JQuery のバージョンを 1.5.1 から 1.4.4 に変更することです。良い解決策ではありませんが、うまくいきます。

于 2011-03-24T19:46:04.493 に答える