Jquery 如何阻止div在悬停时变换？

首先，如果有人有更好的解决方案，能帮我省去麻烦，我会很感激的

基本上，我正在尝试制作一个圆形/椭圆形旋转木马（垂直）。我没见过这样的东西，我已经在谷歌上搜索了好几天了。只是不在那里，这很奇怪

我试着让元素旋转成一个圆圈，当悬停在任何元素上时，所有元素的旋转都会停止，悬停的元素会做一些动画，比如变大

See this JSFiddle: https://jsfiddle.net/23x7t4dq/

我尝试了暂停转换或转换的组合，但都不起作用

.circle容器{
保证金：0自动；
位置：相对位置；
宽度：440px；
高度：440px；
背景：透明；
-webkit动画：旋转6s线性0s无限法线无；
-moz动画：旋转6s线性0s无限法线无；
-ms动画：旋转6s线性0s无限法线无；
-o动画：旋转6s线性0s无限法线无；
动画：旋转6s线性0s无限法线无；
}
.圆圈{
位置：绝对位置；
顶部：170px；
左：170px；
宽度：100px；
高度：100px；
边界半径：50%；
不透明度：0.7；
}
.circle容器：悬停{
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
动画播放状态：暂停；
}
.圈：第n个孩子（1）{
-webkit变换：旋转（0度）translateX（150像素）；
-moz变换：旋转（0度）translateX（150像素）；
-ms变换：旋转（0度）translateX（150像素）；
-o变换：旋转（0度）translateX（150像素）；
变换：旋转（0度）translateX（150像素）；
背景#ff504f；
}
.圈：第n个孩子（2）{
-webkit变换：旋转（72度）translateX（150像素）；
-moz变换：旋转（72度）translateX（150像素）；
-ms变换：旋转（72度）translateX（150像素）；
-o变换：旋转（72度）translateX（150像素）；
变换：旋转（72度）translateX（150像素）；
背景：#ffe63d；
}
.圆圈：第n个孩子（3）{
-webkit变换：旋转（144度）translateX（150像素）；
-moz变换：旋转（144度）translateX（150像素）；
-ms变换：旋转（144度）translateX（150像素）；
-o变换：旋转（144度）translateX（150像素）；
变换：旋转（144度）translateX（150像素）；
背景#50dc64；
}
.圆圈：第n个孩子（4）{
-webkit变换：旋转（216度）translateX（150像素）；
-moz变换：旋转（216度）translateX（150像素）；
-ms变换：旋转（216度）translateX（150像素）；
-o变换：旋转（216度）translateX（150像素）；
变换：旋转（216度）translateX（150像素）；
背景#41c39d；
}
.圆圈：第n个孩子（5）{
-webkit变换：旋转（288deg）translateX（150px）；
-moz变换：旋转（288度）translateX（150像素）；
-ms变换：旋转（288度）translateX（150像素）；
-o变换：旋转（288deg）translateX（150px）；
变换：旋转（288度）translateX（150像素）；
背景：#4db5dc；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
}
}
@-moz关键帧旋转{
从{
-moz变换：旋转（0度）；
}
到{
-moz变换：旋转（360度）；
}
}
@-ms关键帧旋转{
从{
-ms变换：旋转（0度）；
}
到{
-ms变换：旋转（360度）；
}
}
@-o-关键帧旋转{
从{
-o变换：旋转（0度）；
}
到{
-o变换：旋转（360度）；
}
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

---

将鼠标悬停在父div上-仅CSS解决方案

.circle-container:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

将鼠标悬停在每个圆圈上-jQuery解决方案：

父元素没有选择器，所以不可能使用仅CSS的解决方案

JS

CSS

---

将鼠标悬停在父div上-仅CSS解决方案

.circle-container:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

将鼠标悬停在每个圆圈上-jQuery解决方案：

父元素没有选择器，所以不可能使用仅CSS的解决方案

JS

CSS

---

您可以使用

动画播放状态：暂停

如果将容器的
宽度
和
高度
设置为
0
，并使用
变换原点
确保旋转顺利，则
：悬停
仅在将鼠标悬停在子对象上时才会激活

（为了可读性删除了浏览器前缀。仅在Firefox中测试）


.circle容器{
保证金：0自动；
位置：相对位置；
宽度：0；
身高：0；
背景：透明；
边界半径：50%；
变换原点：220px 220px；
左：-220px；
动画：旋转6s线性0s无限法线无；
}
.circle容器：悬停{
动画播放状态：暂停；
}
.圆圈{
位置：绝对位置；
顶部：170px；
左：170px；
宽度：100px；
高度：100px；
边界半径：50%；
不透明度：0.7；
转变：转变；
}
.圈：第n个孩子（1）{
变换：旋转（0度）translateX（150像素）；
背景#ff504f；
}
.圆圈：第n个子项（1）：悬停{
变换：旋转（0度）translateX（150像素）比例（2）；
}
.圈：第n个孩子（2）{
变换：旋转（72度）translateX（150像素）；
背景：#ffe63d；
}
.圆圈：第n个子对象（2）：悬停{
变换：旋转（72度）translateX（150像素）比例（2）；
}
.圆圈：第n个孩子（3）{
变换：旋转（144度）translateX（150像素）；
背景#50dc64；
}
.圆圈：第n个子对象（3）：悬停{
变换：旋转（144度）translateX（150像素）比例（2）；
}
.圆圈：第n个孩子（4）{
变换：旋转（216度）translateX（150像素）；
背景#41c39d；
}
.圆圈：第n个子项（4）：悬停{
变换：旋转（216度）translateX（150像素）比例（2）；
}
.圆圈：第n个孩子（5）{
变换：旋转（288度）translateX（150像素）；
背景：#4db5dc；
}
.圆圈：第n个子（5）：悬停{
变换：旋转（288deg）translateX（150px）比例（2）；
}
@-w
.circle-container.paused {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}