我创建了一个带有极简主义太阳系的网页，当我悬停在其中一个行星上时，我希望它们停止旋转

Question

我在Uni的网页设计课上有一个网页项目，我想制作一个极简主义的太阳系，其中的行星是带有颜色的简单圆圈，然后使用webkit使它们旋转。我还希望它们在我悬停时停止旋转。

这是地球的代码：

#earth {
position: absolute;
top: 0;
left: 50%;
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
}
#earth-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
margin-top: -400px;
margin-left: -400px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
  -webkit-animation: spin-right 14s linear infinite;
     -moz-animation: spin-right 14s linear infinite;
      -ms-animation: spin-right 14s linear infinite;
       -o-animation: spin-right 14s linear infinite;
          animation: spin-right 14s linear infinite;
}
<div id="earth-orbit">
        <img id="earth" src="">
</div>

我如何为地球制作悬停类？

Answer 1

您可以像一样在悬停时暂停动画

#earth-orbit:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

Answer 2

将此代码用于动画附加的类

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