How can I pause all animations through a single element in CSS?

Question

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

If you open the code pen link, you'll see that if you hover over one of the cubes that are rotating, it will pause but the other cubes will continue to rotate; and when you move the cursor from the cube, it will rotate again but in a different position to the one it started with.

What I'm trying to do, however, is to pause all of the cubes by only hovering on one of the cubes, and when I move it away from the cube it was on, it should begin to rotate again from where it paused.

Code Preview:

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

I'm only using the :hover selector but maybe there's another option in CSS to accomplish this instead of in JavaScript?

Answer 1

Because sibling selectors are rather limited in their usage in these cases it's a lot easier to work with parents.

I could not reproduce your rotation problem, works fine here (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>