javascript - 如何准确获取图像中点的位置而不在其他设备中改变

Question

我这里有一张图片 map ，不是谷歌地图my image map

我如何确定该图像中红点的位置，然后我编写代码 jquery 以将鼠标悬停在该点上并显示弹出消息。在个人电脑上没问题，但是当我更改为在移动设备上查看时，它也会改变点的位置。请让我知道如何准确设置红点的位置，并且它不会改变手机或平板电脑的位置。这是我用于获取点位置的代码 jquery

 $(document).ready(function() {
   $("#test").click(function(e) {
     var offset = $(this).offset();
     var relativeX = (e.pageX - offset.left);
     var relativeY = (e.pageY - offset.top);
     alert('X: ' + relativeX + ', Y: ' + relativeY);
     $(".position").val("afaf");
   });
 });

Answer 1

使用 jquery，我们可以将鼠标悬停在某个元素上时，一个曾经不可见的元素出现，一旦鼠标移开，它就会消失。下面的代码应该会向您发送正确的方向。

https://jsfiddle.net/07q6pLfj/1/

<div>
    <p>This is an element which does not change when you hover over it.</p>
        <div class="hover"><div class="popup">
        This is text which pops up when you hover
    </div>
        When you hover over this a popup shows.
</div>

.popup {
    display:none;
    position:absolute;
        background-color: red;
    width:400px;
    height:400px;
        margin-top: 30px;
}


$(".hover").mouseover(function() {
    $(this).children(".popup").show();
}).mouseout(function() {
    $(this).children(".popup").hide();
});