如何通过CSS中的单个元素暂停所有动画

Question

https://codepen.io/jenny0515/pen/MWOMWEy

如果你打开代码笔链接，你会看到，如果你将鼠标悬停在正在旋转的一个多维数据集上，它将暂停，但其他多维数据集将继续旋转；当你将光标从立方体中移动时，它会再次旋转，但位置与开始时不同。

然而，我想做的是，通过只在其中一个立方体上悬停来暂停所有立方体，当我将它从它所在的立方体上移开时，它应该会从暂停的地方再次开始旋转。

代码预览：

.cube:hover{
width: 100px;
height: 100px; 
animation-play-state: paused;
}

我只使用了：hover选择器，但也许CSS中还有另一个选项可以实现这一点，而不是JavaScript中的选项？

Answer 1

因为兄弟选择器在这些情况下的使用相当有限，所以与父母一起工作要容易得多。

我无法重现你的旋转问题，在这里运行良好(Chrome(。

.div{
position: absolute; 
width: 500px;
height: 500px; 
border: 3px solid chartreuse; 
border-radius: 300px; 
left: 500px; 
top: 100px;
}
.circle{
position: absolute;
width: 30px;
height: 30px;
border: 3px solid chartreuse; 
border-radius: 20px;
left: 230px;
top: 230px;
}
.cube{
position: absolute; 
width: 50px;
height: 50px;
border: 5px solid violet; 
left: -180px;
top: -15px;

transform-origin: 200px;

animation: rotate 6s linear infinite;
}
.stop_anim/*:nth-child(n+1)*/:hover .cube{
width: 100px;
height: 100px; 
//cursor: pointer; 

/*animation: float 3s ease-in-out alternate infinite;

transform: translatey(0px);*/

animation-play-state: paused;
}
.cube:nth-of-type(2){ //wrong IF space before nth;
animation-delay: 2s;
border-color: aqua;
}
/*.cube:nth-of-type(2):hover{
width: 100px;
height: 100px;
cursor: pointer;

animation-play-state: paused;
}*/
.cube:nth-of-type(3){
animation-delay: 4s;
border-color: aquamarine;
}
/*.cube:nth-of-type(3):hover{
width: 100px;
height: 100px;
cursor: pointer;

animation-play-state: paused;
}*/
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

<div class="div">
<div class="circle">
<div class="stop_anim">
<div class="cube"><a href=""></a></div>
<div class="cube"><a href=""></a></div>
<div class="cube"><a href=""></a></div>
</div>
</div>
</div>