悬停在动画元素上不一致 [英] Hover not consistently working on animated element

问题描述

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

I'm rotating a div around a circular path with css, and I want to make it change color on hover.

请参阅这里的示范： 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>

在Firefox中检测到相当一致（当我添加-moz前缀...），但很少在Chrome中检测到。

The hover is detected pretty consistently in Firefox (when I add the -moz prefix...), but it's rarely detected in Chrome.

当我添加 onclick 处理程序时，会发生同样的情况。

The same thing happens when I add an onclick handler.

有没有人有任何建议，让它更好地工作？

Does anyone have any advice to make it work better?

问题截图

>

推荐答案

似乎你必须使用javascript，因为@vals说，：hover state不会重新计算，除非鼠标移动。

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

这篇关于悬停在动画元素上不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！