jQuery 地图鼠标移动

Question

我用 jQuery 制作了一张地图，该地图分为许多区域，并使用地图坐标来制作悬停区域。悬停时，每个区域都会出现一个工具提示。一切都很好，但有一个问题。工具提示应跟随鼠标光标。我已经用 mousemove 完成了这一点，但是如果我的地图位于 div 中，该 div 位于页面的 fx 中心，则工具提示不是光标所在的位置，而是可能更靠左。屏幕越大，问题就越严重。

如何更改我的代码，使工具提示始终位于光标所在的位置？

     $(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 内以使其居中，则请将 regionlist div 放在该 div 外部。

工具提示应具有：

• body 作为其父级。这最大限度地减少了相对和绝对定位的问题。
• 包含 CSS“位置：绝对”。
• z-index 大于您将鼠标悬停在其上的元素