咋回事儿呢？ 动画过程中获取到头来鼠标位置

额，说实话，我一开始也搞不明白。 CSS 过渡，图片放大缩小，你想要知道鼠标在哪个位置？ 它不是显示当前的位置吗？ 这太麻烦了，换个思路。！

问题描述

我们经常看到图片放大动画，或者其他元素有过渡效果。 你想知道的是在动画结束的时候，鼠标到底在哪儿？ 但是 `event.offsetX` 和 `event.offsetY` 这些东西，它会告诉你现在的位置啊！ 不会告诉你到头来的位置！ 这简直是坑爹。

解决方案：用一个透明的盖子

于是啊，我就想了个办法。 就是加个透明的盖子。这个盖子跟图片一样大，但是没有过渡效果。 它就像一个静止的背景一样。 然后我们把鼠标事件给这个盖子捕获了，摆烂。。

HTML 代码

CSS 代码

JavaScript 代码

原理是什么呢？

简单来说就是：

• 图片有 `transition` ， 所以它会平滑地放大缩小
• 盖子没有 `transition` ，所以它会马上显示
• 我们把鼠标事件给盖子捕获了

代码解释

• `#container`: 包裹所有东西的盒子
• `#myImage`: 图片元素
• `#overlay`: 透明覆盖层

改进一下。 所以啊，想要获取 CSS 过渡元素的到头来鼠标位置吗？ 加个透明的盖子就行了！ 很简单吧？ 虽然我也不知道这玩意儿是不是真的好用... 但是我写起来挺舒服的。