Question

我用jQuery制作了一个地图，它在许多地区分开，并使用地图坐标来制作悬停区域。在悬停时，每个区域都会显示工具提示。一切都很好，但有一个问题。工具提示应该跟随鼠标光标。这个，我已经完成了mousemove，但是如果我的地图位于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“position：absolute”。
z-index大于您悬停的元素

jQuery map mousemove

1 个答案: