jQuery鼠标位置

我有一个问题，用jQuery的鼠标悬停。我有一张地图图片。当我将鼠标悬停在特定区域时，应该在鼠标位置弹出一个div，而不是根据页面的滚动高度弹出一个div。 jQuery鼠标位置

这是一切正常的时候。接下来的图片显示了当我滚动更高时会发生什么。

悬停的面积是相同的，但分区不是在正确的地方。我所做的代码如下：

$(document).ready(function(){ 
       $('area').mouseover(function(e){ 
        var x = e.clientX; 
        var y = e.clientY; 
        var id = $(this).attr("id"); 
        $("div#map-popup-"+id).css({position: "absolute", top: y, left: x}); 
        $("div#map-popup-"+id).show(); 
        $(this).mouseleave(function(){ 
         $("div#map-popup-"+id).hide(); 
        }); 
       }); 
     });

我从来没有与地图和地区工作过，所以我不知道有什么可以搞砸。我从web档案中获得了一个纯html，并且需要在wordpress中恢复该网站。下面是从HTML代码的区域：

<img src="https://web.archive.org/web/20160307004818im_/http://dcca.eu/img/chambers_map_new.png" width="1000" height="507" alt="" usemap="#chambers-map" /> 
<map id="chambers-map" name="chambers-map"> 
    <area id="ulm" shape="circle" coords="85,160,10" href="#" alt="" /> 
    <area id="passau" shape="circle" coords="232,136,10" href="#" alt="" />

所以我的问题是：为什么会发生这种情况，我该如何解决？提前致谢！

来源

2016-09-26 Krisztián Dudás