我怎样才能阻止 div 在悬停在每个 div 上时发生变化？

Question

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

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

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

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

我尝试了暂停转换或过渡的组合，但 none 有效。

.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仅当悬停在 child.

上时才会激活

（为了便于阅读，删除了浏览器前缀。仅在 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");
});

我怎样才能阻止 div 在悬停在每个 div 上时发生变化？

How can I stop divs from transforming on hover on each?

html

css

jquery

carousel

css-transforms