如何让悬停时的图像正确连接到鼠标？

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

更改26日线的来自链接小提琴的JS从

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

到

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

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

看到它的工作updated fiddle。