如何阻止 div 在每个悬停时转换？

Question

首先，如果有人有更好的解决方案并且可以为我省去麻烦，我将不胜感激。

基本上我正在尝试制作圆形/椭圆形旋转木马（垂直）。我还没有看到类似的东西，而且我已经在谷歌上搜索了好几天。它只是不存在，这很奇怪。

我试图让元素绕圈旋转，当悬停在任何元素上时，所有元素的旋转都会停止，悬停的元素会做某种动画，比如变大。

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

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

.circle-container {
    margin: 0 auto;
    position: relative;
    width: 440px;
    height: 440px;
    background: transparent;
    -webkit-animation: rotation 6s linear 0s infinite normal none;
    -moz-animation: rotation 6s linear 0s infinite normal none;
    -ms-animation: rotation 6s linear 0s infinite normal none;
    -o-animation: rotation 6s linear 0s infinite normal none;
    animation: rotation 6s linear 0s infinite normal none;
}
.circle {
    position: absolute;
    top: 170px;
    left: 170px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.7;
}
.circle-container:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
.circle:nth-child(1) {
    -webkit-transform: rotate(0deg) translateX(150px);
    -moz-transform: rotate(0deg) translateX(150px);
    -ms-transform: rotate(0deg) translateX(150px);
    -o-transform: rotate(0deg) translateX(150px);
    transform: rotate(0deg) translateX(150px);
    background: #ff504f;
}
.circle:nth-child(2) {
    -webkit-transform: rotate(72deg) translateX(150px);
    -moz-transform: rotate(72deg) translateX(150px);
    -ms-transform: rotate(72deg) translateX(150px);
    -o-transform: rotate(72deg) translateX(150px);
    transform: rotate(72deg) translateX(150px);
    background: #ffe63d;
}
.circle:nth-child(3) {
    -webkit-transform: rotate(144deg) translateX(150px);
    -moz-transform: rotate(144deg) translateX(150px);
    -ms-transform: rotate(144deg) translateX(150px);
    -o-transform: rotate(144deg) translateX(150px);
    transform: rotate(144deg) translateX(150px);
    background: #50dc64;
}
.circle:nth-child(4) {
    -webkit-transform: rotate(216deg) translateX(150px);
    -moz-transform: rotate(216deg) translateX(150px);
    -ms-transform: rotate(216deg) translateX(150px);
    -o-transform: rotate(216deg) translateX(150px);
    transform: rotate(216deg) translateX(150px);
    background: #41c39d;
}
.circle:nth-child(5) {
    -webkit-transform: rotate(288deg) translateX(150px);
    -moz-transform: rotate(288deg) translateX(150px);
    -ms-transform: rotate(288deg) translateX(150px);
    -o-transform: rotate(288deg) translateX(150px);
    transform: rotate(288deg) translateX(150px);
    background: #4db5dc;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes rotation {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}
@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

<div class="circle-container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

Answer 1

悬停在父 div 上 - 纯 CSS 解决方案

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

JSFiddle

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

父元素没有选择器，因此无法使用纯 CSS 解决方案

JS

$(".circle").mouseenter(function () {
    $(this).parent().addClass("paused");
});

$(".circle").mouseleave(function () {
    $(this).parent().removeClass("paused");
});

CSS

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

JSFiddle

Answer 2

您可以使用animation-play-state: paused; 暂停动画。

如果您将容器的width 和height 设置为0 并使用transform-origin 确保旋转顺利进行，则:hover 将仅在悬停在孩子上时才会激活。

（删除浏览器前缀以提高可读性。仅在 Firefox 中测试）

.circle-container {
  margin: 0 auto;
  position: relative;
  width: 0;
  height: 0;
  background: transparent;
  border-radius: 50%;
  transform-origin: 220px 220px;
  left: -220px;
  animation: rotation 6s linear 0s infinite normal none;
}
.circle-container:hover {
  animation-play-state: paused;
}
.circle {
  position: absolute;
  top: 170px;
  left: 170px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.7;
  transition: transform .5s;
}
.circle:nth-child(1) {
  transform: rotate(0deg) translateX(150px);
  background: #ff504f;
}
.circle:nth-child(1):hover {
  transform: rotate(0deg) translateX(150px) scale(2);
}
.circle:nth-child(2) {
  transform: rotate(72deg) translateX(150px);
  background: #ffe63d;
}
.circle:nth-child(2):hover {
  transform: rotate(72deg) translateX(150px) scale(2);
}
.circle:nth-child(3) {
  transform: rotate(144deg) translateX(150px);
  background: #50dc64;
}
.circle:nth-child(3):hover {
  transform: rotate(144deg) translateX(150px) scale(2);
}
.circle:nth-child(4) {
  transform: rotate(216deg) translateX(150px);
  background: #41c39d;
}
.circle:nth-child(4):hover {
  transform: rotate(216deg) translateX(150px) scale(2);
}
.circle:nth-child(5) {
  transform: rotate(288deg) translateX(150px);
  background: #4db5dc;
}
.circle:nth-child(5):hover {
  transform: rotate(288deg) translateX(150px) scale(2);
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes rotation {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="circle-container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

Answer 3

CSS 中没有父选择器，CSS 中的暂停声明如下：

-webkit-animation-play-state: paused | running;

你必须使用 Javascript 或 jQuery，它看起来像这样：

$(".circle").hover(
  function(){
    $(this).parent().css("-webkit-animation-play-state", "paused");
},
  function(){
    $(this).parent().css("-webkit-animation-play-state", "running");
});