如果鼠标悬停在按钮上但移动，动画将重置

Question

我是网络开发的新手，并没有找到解决方案。 我创建了一个小网站，上面写着当鼠标悬停在它上面时，一张图片在淡入时向下滑动，当你移开它时，它会向上滑动并消失。

问题在于，如果我将鼠标悬停在单词上并且动画运行，如果我稍微移动鼠标而仍悬停在单词上，则动画会反转。 所以基本上，我就是这个词，图片向下滑动，我稍微移动（但仍然在上面），图片又回来了。 这意味着将鼠标移动到一个单词上会使这个奇怪的混蛋运动与图片一起上下几次，直到你离开这个单词为止。

我想要一个类似的简单示例，在已经存在的情况下将鼠标移动到该字上，不影响动画，并且只有当鼠标完全偏离它时才将其反转。

非常感谢，如果您有任何疑问，请随时联系！

Answer 1

你可以这样做：

$( "#element" ).mouseover(function() {
      //Animate in
    });
    $( "#element" ).mouseleave(function() {
       //Animate out
      });

Css（css不太稳定，但我认为你可以这样做）：

.object{
 top:0;
 animation-duration: 4s;
}
  .element:hover ~ .object{
  top:50px;

}