Javascript 图像不是鼠标的尾部

我正在尝试将图像附加到鼠标上，但当我将鼠标悬停在图像上时，图像无法正确显示。我需要使它的图像预览，是尾随鼠标，是更大的鼠标预览。你能帮我吗

这是小提琴：

代码如下：

document.querySelector('.container').addEventListener('mouseover', function(e) {
  e.preventDefault();
  if (e.target.tagName === 'IMG') {

    //create the div tag for preview
    var myElement = document.createElement('div');
    myElement.className = 'preview';
    e.target.parentNode.appendChild(myElement);
    //Create the image element for preview
    var myImg = document.createElement('img');
    var imgLoc = e.target.src;
    myImg.src = imgLoc;

    myElement.style.left = e.offsetX + 15 + 'px';
    myElement.style.top = e.offsetY + 15 + 'px';
    myImg.style.width = "500px";
    myImg.style.height = "500px";
    myElement.style.zIndex = "-1";
    myElement.appendChild(myImg);

    //When mouse goes out of the image delete the preview
    e.target.addEventListener('mouseout', function handler(d) {
      var myNode = d.target.parentNode.querySelector('div.preview');
      myNode.parentNode.removeChild(myNode);
      e.target.removeEventListener('mouseout', handler, false);
    }, false);

    //place the image 15 inches to the bottom, right of the mouse
    e.target.addEventListener('mousemove', function(f) {
      myElement.style.left = f.offsetX + 15 + 'px';
      myElement.style.top = f.offsetY + 15 + 'px';
    });

  }
}, false);

更新：

---

我已经更新了小提琴（非常感谢彼得），现在图像在右边。我只需要让它更靠近鼠标。我该怎么做呢？

问题1：让悬停预览跟随鼠标

解决方案：添加相对或绝对定位

myElement.style.position='absolute'

问题2：使悬停预览显示在缩略图上方

解决方案（创建新问题）：将
z-index
提高到2

这将造成悬停预览在缩略图上出现时中断悬停事件的问题。您可以通过在
mouseout
事件中检查鼠标坐标，并查看它们是否实际超出所选触发缩略图的边界来解决此问题。如果不是，则取消预览关闭，因为这只是中断。还有其他的方法，但你似乎对坐标很熟悉，所以这就是我想到的

此外，还需要调整鼠标跟踪坐标，使其更好地与实际光标对齐。这应该会让你行动起来，随时更新小提琴，并询问是否还有更多问题。
我无法评论。。但是要回答你在回答评论中的最后一个问题，我相信你必须做一些类似的事情

您必须重新加载图像才能获得原始大小。
什么不起作用？有相对路径的图像将不会被载入小提琴……每当图像被悬停时，图像不会跟随鼠标，在我的文件中，上面的图像的预览在中间的图像后面。我已经更新了小提琴，图像在鼠标的右侧，并且完美地跟随鼠标。我所需要的，就是图片右边15像素，鼠标下方15像素。当我改变两个偏移上的像素时，它不起作用。我做错了什么？好吧，我通读了一遍，我在想，为了改变图像的位置，使其右侧设置为15px，底部设置为15px，我需要使用
pageX和pageY
”值，对吗？你要么需要使用jQuery，要么需要使用整个函数（取自jQuery）正确计算鼠标的实际坐标。jQuery事件自动包含正确的坐标，可能会让您的生活更轻松。听起来不错。但由于缺乏jQuery知识，我无法正确执行该代码。最后一个问题，如何使鼠标的图像预览比使用DOM的页面上的图像更大？谢谢，我很感激！我已经达到了图像跟随鼠标的程度，但是我需要让图像更靠近鼠标。我该怎么做？