hoverIntentでホバー上のマウス位置にDIVを表示

Question

これで、ジョブに関する情報を含む表があります。

目標は、特定のジョブについてこのテーブルの行を移動すると、jQueryがAjax呼び出しを行い、ジョブに関するデータを取得し、ポップアップでマウスの位置に表示することです。

次のように私のJavascriptを/ jQueryのです：だから私たちはテーブルの行を探している

$('#report').find('tr').hoverIntent({ // mouseover 
    over: statusOnHover, 
    out: statusOffHover 
}); 


function statusOnHover(){ 
     $.ajax({ 
      type: "POST", 
      data: "data=" + $(this).attr('id'), 
      url: "ajax/latest_update.php", 
      success: function(msg){ 
       if (msg != ''){ 
        $("#message").html(msg); 
        $("#message").css({ 
         'position':absolute, 
         'top':event.pageY, 
         'left':event.pageX 
        }); 
       } 
      } 
     }); 
} 
function statusOffHover(){ 
    $("#message").html(''); 
} 

し、ユーザーが（hoverIntentを使用して）、その上にカーソルを移動しようとするときには、機能の上にマウスを実行します。この関数はlatest_update.phpスクリプトを呼び出します。このスクリプトは、行IDから引っ張られたjob_idに基づいてHTMLデータの事前フォーマットされたサンプルを配信します。このHTMLデータは、メッセージdivに挿入されます。

AJAXクエリはうまく動作し、データをdivにコピーしますが、divのfloatをマウスポインタにするためのCSSの書式設定は機能しません。このCSSは、標準の.mouseoverと.mouseoutを使用しているときに機能します。

これまでこれまでトラブルシューティングをしておらず、多くのことを試してきました。誰にもアイデアはありますか？

Answer 1

残念ながらデイブが提供する答えが正しい解を与えませんでした。それは、ホバー上のdivを表示しましたが、マウスポインタの位置に必要なDIVを表示しませんでした。

問題は、マウスの位置でdivを表示するCSSは、必要なイベント位置を取得するためにマウスを移動するときだけ呼び出されるということでした。

このソリューションでは、hoverIntentを使用して遅延を管理しています。

正しいコードは次のように：

$('#report').find('tr').hoverIntent({ // mouseover 
    over: statusOnHover, 
    out: statusOffHover 
}); 

function statusOnHover(){ 
    $(this).mousemove(function(event){ 
     $('#message').css({'top':event.pageY,'left':event.pageX}); 
    }); 
    $.ajax({ 
     type: "POST", 
     data: "data=" + $(this).attr('id'), 
     url: "ajax/latest_update.php", 
     success: function(msg){ 
      if (msg != ''){ 
       $('#message').html(msg).show(); 

      } 
     }   
    }); 
} 
function statusOffHover(){ 
    $("#message").html(''); 
} 

Answer 2

私はそれがこのフィドルをチェックし、MouseEnterイベントとmouseleaveを使用して動作させる：http://jsfiddle.net/jv7YT/1/

$('#report').mouseenter(function(){ 
    //ajax call and show popup 
}).mouseleave(function(){ 
    // hide popup 
});