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大於您懸停的元素