Javascript 如何在鼠标悬停按钮时停止所有站点动画

我遇到了一个难题，我几乎什么都试过了，却没有找到解决办法

当我将鼠标悬停在

.search\u bar

（表单内）按钮上时，我想停止所有站点（

.ball

，

.f\u bl

，

.s\u bl

）的动画，可以吗

.search{
动画：色彩世界15秒无限
}  
.ball、.f_bl、.s_bl、.searchbar{
动画：色彩世界15秒无限
}  
@关键帧颜色{
7.14%{背景：#E1140A；}
21.43%{背景：#FF6A00；}
35.71%{背景：#FEE600；}
50%{背景：#6AC346；}
64.27%{背景：#46C8E1；}
78.55%{背景：#3E8DDD；}
92.83%{背景：#F04187；}
116%{背景：#E1140A；}
}
@世界的关键帧颜色{
7.14%{颜色：#E1140A；}
21.43%{颜色：#FF6A00；}
35.71%{颜色：#FEE600；}
50%{颜色：#6AC346；}
64.27%{颜色：#46C8E1；}
78.55%{颜色：#3E8DDD；}
92.83%{颜色：#F04187；}
116%{颜色：#E1140A；}
}

hellosearch

CSS中存在

动画播放状态：paused

，因此我们可以将其作为单独的类添加，我们称之为

.paused

。现在，当我们将鼠标悬停在某个元素上时，我们可以将该类添加到所有需要的元素中，然后在鼠标离开该类时将其删除。我将下面的示例设置为当您将鼠标悬停在

.button\u search

元素上时执行此操作

var btn=document.querySelector（'.button_search'）；
var animatedEls=document.queryselectoral（'.search、.ball、.f_bl、.s_bl、.searchbar'）；
btn.addEventListener（“鼠标指针”，函数（）{
对于（var i=0；我只是一个旁注，但我很确定在
@keyframe
动画中不能超过100%。这是通过动画完成的百分比，通过动画不能达到116%