悬停在动画元素上的工作不一致答案

【问题标题】：Hover not consistently working on animated element悬停在动画元素上的工作不一致
【发布时间】：2015-05-06 09:01:27
【问题描述】：

我正在使用 css 围绕圆形路径旋转一个 div，我想让它在悬停时改变颜色。

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>

在 Firefox 中非常一致地检测到悬停（当我添加 -moz 前缀时...），但在 Chrome 中很少检测到。

当我添加一个onclick 处理程序时，也会发生同样的事情。

有人有什么建议可以让它更好地工作吗？

问题截图

【问题讨论】：

它在 Safari 中也不起作用。
它对我来说很好用。您使用的是哪个 Chrome 浏览器？
Chrome 41。有趣的是，它似乎在 jsfiddle 上运行良好，但如果我将代码粘贴到 html 文件中，它将无法运行。
看起来像是某种 Chrome 优化。如果您不移动光标，则不会重新计算悬停状态。尝试将鼠标设置在元素前面的路径上，并使其保持静止。悬停不会触发。它也在 Canary 上发生。
是的，如果我将鼠标放在元素前面，即使在 JSFiddle 中，悬停也不会触发。只要我移动鼠标，它就会在 Fiddle 上持续触发。与在本地 HTML 文件中相反，您必须将鼠标悬停在它之前所在的位置上，以便完全注册，即使您正在移动鼠标。我将尝试看看为什么它在 Fiddle 上效果更好，看看我是否可以模仿它。

标签： css css-animations

【解决方案1】：

看来您必须使用 javascript，因为正如 @vals 所说，除非移动鼠标，否则不会重新计算 :hover 状态。

【讨论】：