應用變換比例時在鼠標位置顯示元素

Question

如何在變換縮放時檢索正確的鼠標位置，例如transform: scale(1.6); 被申請;被應用？ 在示例中，彈出元素出現太靠下和太靠右

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 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>

Answer 1

改用偏移位置：

 $(".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 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>