Hover not consistently working on animated element - css

Question

I'm rotating a div around a circular path with css, and I want to make it change color on hover.
See demo here: http://jsfiddle.net/gg7tnueu/1/
html,
body {
height: 100%;
margin: 0;
}
.planet {
border-radius: 50%;
border: 2px solid #1a1a1a;
position: absolute;
margin: auto;
/*top: 50%;*/
-webkit-animation: orbit 6s infinite linear;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
animation: orbit 6s infinite linear;
backface-visibility: hidden;
transform: translateZ(0);
}
.planet.code {
-webkit-transform-origin: 8.5vh 7.875vh;
transform-origin: 8.5vh 7.875vh;
}
.planet.code:hover {
background: red;
}
#-webkit-keyframes orbit {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes orbit {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.ring {
margin: auto;
border-radius: 50%;
border: 2px solid #1a1a1a;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.ring.inner.middle {
width: 75%;
height: 75%;
}
.ring.inner.last {
width: 30%;
height: 30%;
}
#media (orientation: landscape) {
.ring.outer {
width: 75vh;
height: 75vh;
}
.planet {
width: 3.75vh;
height: 3.75vh;
}
}
#media screen and (orientation: portrait) {
.ring.outer {
width: 75vw;
height: 75vw;
}
.planet {
width: 3.75vw;
height: 3.75vw;
left: -1.875vw;
}
}
<div class="ring outer">
<div class="ring inner middle">
<div class="ring inner last">
<div class='planet code'>
</div>
</div>
</div>
</div>
The hover is detected pretty consistently in Firefox (when I add the -moz prefix...), but it's rarely detected in Chrome.
The same thing happens when I add an onclick handler.
Does anyone have any advice to make it work better?
Screenshot of issue

Answer 1

It seems you'll have to use javascript since, as #vals said, the :hover state is not recalculated unless the mouse is moved.