jQuery map mousemove

Question

我制作了一个jQuery的地图，该地图在许多地区被分割，并使用地图坐标来制作悬停区域。悬停时，每个地区都会显示工具提示。一切都很好，但有一个问题。工具提示应该遵循鼠标光标。这一点，我已经用mousemove完成了，但是如果我的地图位于一个div，这个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中居中，那么把你的regionlist div放在那个div之外。

的提示应该有：

• 的body因为它的父。这最大限度地减少了相对和绝对定位的问题。
• 包含CSS“position：absolute”。
• z-index大于您悬停的元素