如何使悬停图像正确附加到鼠标？

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';
});

Preview of what the image is doing and how far away it is from the mouse

Answer 1

从链接小提琴改变你的JS的第26行

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

到

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

为什么要减去预览图像的高度？因为您将预览图像放在预览图像下方。

在updated fiddle中查看它。