私はミニマリストソーラーシステムを備えたWebページを作成しました。私はそれらのいずれかを動かすと回転を止めてほしい

Question

私はUniのWebデザインクラスのこのWebページプロジェクトを手に入れました。システムでは、惑星は色のついたシンプルな円であり、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; 
}