Javascript 鼠标悬停时使用CSS和jQuery停止围绕圆圈旋转项目时出现问题

每当我将鼠标悬停在某个项目上时，我试图停止围绕一个圆旋转项目的动画。 从我得到的代码笔中，悬停在上面的项目停止旋转，但其他项目继续旋转或反向旋转。我的目标是使所有的项目停止旋转，每当其中一个被悬停。 我将感谢任何帮助。 谢谢

var半径=100；//调整以移入和移出项目
变量字段=$（'.item'），
容器=$（“#容器”），
宽度=容器。宽度（），
高度=容器高度（）；
var角度=0，
步长=（2*Math.PI）/fields.length；
字段。每个（函数（）{
var x=Math.round（宽度/2+半径*Math.cos（角度）-$（this.width（）/2）；
变量y=Math.round（高度/2+半径*Math.sin（角度）-$（此）.height（）/2）；
if（window.console）{
console.log（$（this.text（），x，y）；
}
$（this.css）({
左：x+‘px’，
顶部：y+‘px’
});
角度+=步长；
});
正文{
填料：2米；
}
#容器{
宽度：200px；
高度：200px；
利润率：10px自动；
边框：1px实心#000；
位置：相对位置；
边界半径：50%；
动画：旋转20秒线性无限；
}
.项目{
宽度：30px；
高度：30px；
线高：30px；
文本对齐：居中；
边界半径：50%；
位置：绝对位置；
背景：#f00；
动画：旋转20秒线性无限反转；
}
.项目：第n个子项（1）：悬停{
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
}
@关键帧旋转{
100% {
变换：旋转（1圈）；
}
}
#容器：悬停，
.项目：悬停{
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
动画播放状态：暂停；
}

1.
2.
3.
每当使用以下选择器将鼠标悬停在容器上方时，暂停
.item
元素的动画：

#container:hover .item

当
#容器
悬停在其上时，这将选择所有
.item
元素。
var半径=100；//调整以移入和移出项目
变量字段=$（'.item'），
容器=$（“#容器”），
宽度=容器。宽度（），
高度=容器高度（）；
var角度=0，
步长=（2*Math.PI）/fields.length；
字段。每个（函数（）{
var x=Math.round（宽度/2+半径*Math.cos（角度）-$（this.width（）/2）；
变量y=Math.round（高度/2+半径*Math.sin（角度）-$（此）.height（）/2）；
$（this.css）({
左：x+‘px’，
顶部：y+‘px’
});
角度+=步长；
});
正文{
填料：2米；
}
#容器{
宽度：200px；
高度：200px；
利润率：10px自动；
边框：1px实心#000；
位置：相对位置；
边界半径：50%；
动画：旋转20秒线性无限；
}
.项目{
宽度：30px；
高度：30px；
线高：30px；
文本对齐：居中；
边界半径：50%；
位置：绝对位置；
背景：#f00；
动画：旋转20秒线性无限反转；
}
.项目：第n个子项（1）：悬停{
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
}
@关键帧旋转{
100% {
变换：旋转（1圈）；
}
}
#容器：悬停，
#容器：hover.item{
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
动画播放状态：暂停；
}

1.
2.
3.
哇，这太棒了，我从没想过用容器来阻止一切。非常感谢，伙计。