如何使懸停時的圖像正確附加到鼠標？

Question

我的圖像預覽無法正確連接到鼠標時出現問題。 當我將鼠標懸停在圖像上時，預覽位於鼠標下方。 我需要這樣做，以便圖像顯示必須在鼠標右側15px，在鼠標下方15px。 我該如何實現？ （需要嚴格使用JavaScript。）

這是小提琴：

https://jsfiddle.net/pgyt1qpg/3/

這是代碼的一部分：

e.target.addEventListener('mousemove', function(f) {
 var x = f.offsetX;
    y = f.offsetY;
myElement.style.top = (y + 20) + 'px';
myElement.style.left = (x + 20) + 'px';
});

預覽圖像的功能以及與鼠標的距離

Answer 1

從鏈接的小提琴中更改JS的第26行

myElement.style.top = f.offsetY + 5 + 'px';

至

myElement.style.top = f.offsetY - parseInt(window.getComputedStyle(f.target).height) + 5 + 'px';

為什么要減去預覽圖像的高度？ 因為您將預覽圖像放置在預覽圖像的下方。

看到它在更新的小提琴中工作。