jQuery map mousemove

Question

jQuery로지도를 만들었습니다. jQuery는 많은 지역에서 분할되어 있으며지도 좌표를 사용하여 마우스 오버 영역을 만듭니다. 마우스를 올리면 모든 지역에 대한 툴팁이 나타납니다. 모든 것이 훌륭하게 작동하지만 한 가지 문제가 있습니다. 툴팁은 마우스 커서를 따라야합니다. 이 작업은 mousemove로 수행했지만 페이지가 가운데에있는 div에 내지도가있는 경우 툴팁은 커서가있는 위치가 아니라 왼쪽에있는 툴팁입니다. 문제는 화면이 커질수록 악화됩니다.

코드를 어떻게 바꿀 수 있습니까? 툴팁은 항상 커서의 위치입니까?

 $(function() { 

    $("#map-container AREA").mouseover(function() { 
     var regionMap = "." + $(this).attr("id") + "-map"; 
     $(regionMap).css("display", "inline"); 
    }).mouseout(function() { 

      var regionMap = "." + $(this).attr("id") + "-map"; 
     // Check if a click event has occured and only change the Region hover state accodringly 
     if (!$(regionMap).hasClass("selected")) { 
      $(regionMap).css("display", "none"); 
     } 
    }); 

    $("#map-container AREA").click(function() { 
     $("#map-container img.region").removeClass("selected").css("display", "none"); 
     var regionMap = "." + $(this).attr("id") + "-map"; 
     $(regionMap).addClass("selected").css("display", "inline"); 
    }); 

}); 


$(document).ready(function() { 
    $(".tooltip").hide(); 

    $("#map-container area").mousemove(function(e) { 

    var regionList = '.' + $(this).attr('id') + '-list'; 
    var topheight = $(regionList).height() + 55; 
     $(regionList).show(); 
     $(regionList).css({ 
      top: (e.pageY - topheight) + "px", 
      left: (e.pageX - 45) + "px" 
     }); 
    }); 
    $("#map-container area").mouseout(function(e) { 
     $(".tooltip").hide(); 
    }); 
}); 

Answer 1

위치가 문제 일 수 있습니다. 지도를 가운데에 배치하려면 div에지도를 넣은 다음 해당 div 외부에 regionlist div를 배치합니다.

툴팁이 있어야합니다

• body을 그것의 부모로. 이렇게하면 상대 위치와 절대 위치의 문제를 최소화 할 수 있습니다.
• "position : absolute"CSS를 포함 시켰습니다.
• 당신이 너무 HTML을 게시 할 수