图像不是尾随鼠标

Question

我正在尝试将图像附加到鼠标上，当我将鼠标悬停在图像上时，它无法正确显示。我需要这样做，以便鼠标预览时拖尾鼠标的图像预览更大。你能帮帮我吗？

这是小提琴：

https://jsfiddle.net/pgyt1qpg/1/

这是代码：

external-path

更新：

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

Answer 1

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

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

myElement.style.position = 'absolute';

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

解决方案（尽管会产生新问题）：将z-index提升为2。

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

此外，您需要调整鼠标跟踪坐标，使其与实际光标更好地对齐。这应该让你感动，随时更新小提琴并询问是否还有其他问题。

Answer 2

我无法发表评论..但是在答案的评论中回答你的最后一个问题，我相信你将不得不做this之类的事情。

您必须重新加载图片才能获得原始尺寸。