hoverIntent를 사용하여 마우스를 올려 놓을 때 마우스 위치에 DIV 표시

Question

좋아요, 그래서 작업에 대한 정보가 들어있는 표가 있습니다.

목표는 사용자가 특정 작업에 대해이 테이블의 행을 탐색 할 때 jQuery가 Ajax 호출을 작성하여 작업에 대한 데이터를 검색하고이를 마우스 위치의 팝업으로 표시하는 것입니다. 사용자가이 기능을 통해 마우스를 실행 (hoverIntent 사용) 그것을 가져하고자 할 때

$('#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(''); 
} 

그래서 우리는 다음 테이블 행을 발견하고있어 다음과 같이

내 자바 스크립트/jQuery를이다. 이 함수는 행 ID에서 가져온 job_id를 기반으로 미리 포맷 된 HTML 데이터 샘플을 전달하는 latest_update.php 스크립트를 호출합니다. 이 HTML 데이터는 메시지 div에 삽입됩니다.

이제 AJAX 쿼리가 제대로 실행되고 데이터가 div에 복사되지만 div 플로트를 마우스 포인터로 사용하는 CSS 서식이 작동하지 않습니다. 이 CSS는 표준 .mouseover 및 .mouseout을 사용할 때 작동합니다.

지금까지 문제 해결에 많은 어려움이 없었으며 여러 가지 시도를 해 보았습니다. 누구든지 아이디어가 있습니까?

Answer 1

http://jsfiddle.net/jv7YT/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를 사용하여 작동하도록,이 바이올린을 확인하십시오

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