jQuery鼠标位置

Question

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

这是一切顺利的时候。 下一张图片显示了当我向上滚动一点时会发生什么。

悬停区域是相同的，但div不在正确的位置。我的代码如下：

$(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="" />

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

Answer 1

鼠标光标的位置基于页面上的X和Y坐标。您正在寻找pageX和pageY：http://api.jquery.com/event.pagex/

因此，您可能希望根据position: fixed;和e.pageX

e.pageY元素

Answer 2

您希望弹出窗口的位置相对于视口而不是父元素。因此，使用位置作为“固定”。而不是绝对的＆＃39;。