Javascript 鼠标悬停在元素JS或Jquery中时循环

当鼠标悬停在元素中时，我需要动画，但当用户使鼠标悬停在元素中时，动画将在本地当前停止

countRotate=0；
adiciona=正确；
$（'.circulo left'）.mouseenter（函数（）{
$（'#CirculoPrincipalCambaazulclaro'）.css（'transform'，'rotate（'+countRotate+'deg'）；
如果（adiciona==true）{
countRotate++；
如果（countRotate==360）{
adiciona=假；
}
}否则{
countRotate=countRotate-1；
如果（countRotate==0）{
adiciona=正确；
}
}
});
//我想到了类似的事情。

.circle{
宽度：200px；
高度：200px；
边界半径：50%；
边境
}
.圆圈：悬停{
#环主马巴祖拉罗{
@包括动画（交替旋转）；
}
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
/*但当我移除鼠标时，它会返回到起点*/
更新：添加一些JS以获得所需的输出。

您不需要jquery或js来获得这种效果。这是你需要做的

稍微编辑了您的代码。


const circle=document.querySelector（'.circle'）；
circle.onmouseover=函数（）{
this.style.animation='旋转1.5s无限线性'；
this.style.webkitAnimationPlayState=“running”；
}
circle.onmouseout=函数（）{
this.style.webkitAnimationPlayState=“暂停”；
}
.circle{
宽度：200px；
高度：200px；
边界半径：50%；
背景：红色；
位置：相对位置；
光标：指针；
}
跨度{
宽度：5px；
高度：30px；
背景：#fff；
位置：绝对位置；
排名：0；
左：50%；
左边距：-5px；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
我根据@hunzaboy的回答，OP说他希望动画保持它的状态，所以我做了一些调整，也使旋转线性化

如果您将旋转保持99999999秒（约277小时），旋转将保持不变


.circle{
宽度：200px；
高度：200px；
边界半径：50%；
背景：红色；
位置：相对位置；
过渡性质：变换；
过渡时间：2s；
转换延迟：99999999秒；
过渡时间函数：线性；
}
跨度{
宽度：10px；
高度：40px；
背景：#fff；
位置：绝对位置；
排名：0；
左：50%；
}
.圆圈：悬停{
变换：旋转（360度）；
转换延迟：0s；
}
/*但当我移除鼠标时，它会返回到起点*/
我们很好，谢谢您的询问。请分享您尝试过的内容，并阅读我们最需要的内容。代码段不起作用。您需要包含jquery。Where
#CirculopPrincipalMabaazulclaro
来自何处？将其设置为正方形，因为无法看到整圈的旋转。这与我的代码相同。但是，这样，当用户移除鼠标时，它会返回到起始位置。@Wellingtonfjr，现在检查：）@Jamesonthedog，它只运行一次。检查我的更新答案：）