嗨，各位小伙伴！今天咱们来聊聊一个经常碰到的问题：在 CSS 进行缩放和过渡动画的时候，想知道鼠标现在在哪儿。直接用 `event.offsetX` 和 `event.offsetY` 可能不太行， 主要原因是它们是动画过程中的值，而不是动画结束后才是到头来的位置。别担心，我来给你们分享一些简单的办法。

什么是 event.offsetX 和 event.offsetY？

先说说咱们简单说说 `event.offsetX` 和 `event.offsetY` 是什么意思。它们是 JavaScript 事件对象里的一些属性，可以告诉你鼠标相对于元素左上角的坐标。 我不敢苟同... 但是！当你在用 CSS 做缩放动画的时候，这些值会因为动画的进行而变化。也就是说你看到的是动画过程中的位置，而不是到头来的位置。

为什么需要替代方案？

想象一下你正在做一个网页上的图片放大效果。你希望用户在图片上移动鼠标的时候看到它放大缩小。但是如果直接用 `event.offsetX` 和 `event.offsetY` 来计算鼠标位置的话，会非常麻烦。主要原因是每次鼠标移动的时候，坐标都在变化，戳到痛处了。！

解决方案：引入辅助元素

出道即巅峰。 好消息是咱们可以用一些简单的 HTML 和 CSS 来解决这个问题！核心思路就是：创建一个与你的目标元素完全一样的不可见元素。然后把鼠标事件绑定到这个辅助元素上。

步骤一：创建辅助元素

在你的 HTML 文件中添加一个空的 div 元素。这个 div 的宽度和高度应该和你的目标元素的宽度和高度一样。

步骤二：设置辅助元素的样式

害... `#helper` 这个 div 的样式要特别注意。它的宽度和高度一定要设置为与目标元素的相同值。而且要设置 `position` 为 `absolute` 或者 `fixed`, 这样才能把它定位在正确的位置上。

步骤三：添加 JavaScript 代码

步骤四：绑定事件到辅助元素

代码示例：

一些补充说明

• 性能问题： 如果你的图片非常大或者动画非常复杂，老是更新 DOM 可能影响性能。
• 兼容性问题： 有些旧版本的浏览器可能不支持某些 CSS 特性或者 JavaScript API 。