为什么当我将鼠标光标悬停在 div 内时，我的图像正在传送

Question

所以基本上我看过很多高级动画网站。我尝试创建一个图像，当我将鼠标光标与 div 坐标一起移动时，它会跟随图像。

基本上我的codepen里的代码是这样的

https://codepen.io/myth-vince/pen/PoQJOXj

当您尝试将光标移动到图像中时..它就像传送到左上角一样，因为我认为这是图像的恒定矩形高度和宽度。

如果有人能帮我解决这个问题..将不胜感激。我已经创建了一些像这样的高级动画，但之前从未遇到过，只是突然传送。

我相信它与此有关

var rect = e.target.getBoundingClientRect();
        console.log(rect)
        var x = e.clientX - rect.left; //x position within the element.
        var y = e.clientY - rect.top;  //y position within the element.

或者可能是 SCSS，但我不知道在哪里，因为一切看起来都很好..但我认为这里唯一真正的问题是因为当我尝试使它也将鼠标光标中的图像居中时，它会自行调整并且不会在鼠标光标的中心对齐，因为它正在避免它传送。

编辑

更多信息.. mouseover 和 mousemove 的部分 mousemove 只会在鼠标悬停在 div 上时开始，因此图像将开始移出。

现在我需要获取 e.clientX 和 e.clientY 以便它可以获取 div 的部分所在的位置。而 rectX 和 rectY 是获取它的高度和宽度部分

Show DIV at mouse cursor on hover of span

你可以在这里看到 link。

我从哪里得到延迟图像的运动在这里

.

Answer 1

var rect = e.target.getBoundingClientRect();

这是你的问题。

与大多数其他事件类型一样，mousemove 事件 通过 DOM 冒泡 。

当您将光标放在其中一张图片上时 - 然后 e.target 不再是 box，而是那个特定的图片。因此，您现在使用的不是与您的盒子相关的 getBoundingClientRect 数据，而是与特定图像相关的数据。

一旦你做了这个

var rect = box.getBoundingClientRect();

相反，问题消失了。

为什么当我将鼠标光标悬停在 div 内时，我的图像正在传送

Why my image is teleporting when I'm hovering the image by my mouse cursor inside the div

javascript

css

animation