Javascript 当鼠标悬停在按钮/元素上时，如何使其具有动画效果？

我举了一个我所想的例子，因为我无法真正描述它，我希望人们不会介意我直接链接到一个商业网站，但无论如何：

在底部附近有一个包含6个div元素的片段，当您将鼠标悬停在每个div元素上时，它们以类似的方式设置动画

起初，我怀疑onmouseinter的静态背景图像被gif所取代，但后来我意识到onmouseleave在某种程度上正在从onmouseleave发生时动画完成的点“反转”动画

---

我很想从技术角度了解某人是如何做到这一点的，我不需要任何细节或例子。我就是想不出任何过去的GIF。

处理动画的最干净的方法是使用纯CSS，这样您就不会不必要地将Javascript代码与样式逻辑混为一谈。根据我的经验，如果你能用CSS处理这些事情，那通常是最好的解决方案

如何实现您试图实现的基本效果

---

这里要注意的关键元素是变换和转换。无需JS。

这是纯CSS，在悬停时悬停时旋转效果。你可以在这里搜索“rotate”来找到背后的逻辑：你至少应该自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请带着您的代码回来，解释您尝试了什么以及为什么它不起作用。非常有用，我根本没有想到这一点。现在，我只需要继续扩展我正在思考的更高级的东西。同样有用的是，CSS允许添加&:hover，这将有助于将来清理文件！谢谢bunch@PaulMcGlinchey注意&：hover实际上是Sass的一个特性<代码>&表示嵌套中最近的选择器（即父选择器）。如果您使用的是香草CSS，请确保替换

&

。否则，就使用Sass；太棒了。此外，如果这个答案对你有帮助，马克也是正确的。