How can I accurately determine the mouse position when a transform scale, such as transform: scale(1.6);, is applied? Currently, the popup element is displaying too far down and to the right in this scenario.
$(".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 class="popup" id="popuphover1" style="display:none">test1</div>
<div class="popup" id="popuphover2" style="display:none">test2</div>
<br><br>
<span class="spanhover" id="hover1">Mouse over</span>