Show element at the mouse position when transform scale is applied-CodePudding

How to retrieve the correct mouse position when a transform scale, e.g transform: scale(1.6); is applied? In the example, the popup element appears too far down and too far to the right

https://jsfiddle.net/Smolo/34nh6Lwb/

$(".spanhover").hover(
  function (event) {
    var divid = "#popup"   $(this).attr("id");
    $(divid).css({ top: event.clientY, left: event.clientX }).show();
  },
  function () {
    var divid = "#popup"   $(this).attr("id");
    $(divid).hide();
  }
);

.spanhover {
    cursor: pointer;
}
.popup {
    position: absolute;
    display: none;
}

body {
   transform: scale(1.6);
   transform-origin: 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="popuphover1" style="display:none">test1</div>
<div  id="popuphover2" style="display:none">test2</div>
<br><br>
<span  id="hover1">Mouse over</span>

CodePudding user response：

Use offset position instead:

$(".spanhover").hover(
  function (event) {
    var divid = "#popup"   $(this).attr("id");
    $(divid).css({ top: event.offsetY, left: event.offsetX }).show();
  },
  function () {
    var divid = "#popup"   $(this).attr("id");
    $(divid).hide();
  }
);

.spanhover {
    cursor: pointer;
}
.popup {
    position: absolute;
    display: none;
}

body {
   transform: scale(1.6);
   transform-origin: 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="popuphover1" style="display:none">test1</div>
<div  id="popuphover2" style="display:none">test2</div>
<br><br>
<span  id="hover1">Mouse over</span>