网络工具包动画和链接问题

Question

超链接菜单项时遇到问题。菜单附有网络工具包动画。灵感来自代码笔演示，用于创建动态菜单。环绕圆圈菜单工作正常。不知何故，超链接不起作用。如果我能在菜单悬停上暂停 webkit 动画，将不胜感激。为我指出正确的方向。

这是 [代码笔演示链接] (https://codepen.io/aroganz/pen/ZEELqKr(

<div class="outCircle">
<div class="rotate anim1">
<div class="counterrotate">
<div class="inner">Home
</div>
</div>
</div>
<div class="rotate anim2">
<div class="counterrotate">
<div class="inner"><a href="www.colorchalk.com">Our Team</a>
</div>
</div>
</div>
<div class="rotate anim3">
<div class="counterrotate">
<div class="inner"><a href="www.colorchalk.com">Our Servicces</a>
</div>
</div>
</div>
<div class="rotate anim4">
<div class="counterrotate">
<div class="inner">Contact
</div>
</div>
</div>
</div>

CSS部分

.outCircle {
width: 300px;
height: 300px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
}
.rotate {
width: 100%;
height: 100%;
position: absolute;  /* add this */
}
.counterrotate {
width: 100px;
height: 100px;
}
.inner {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
background: red;
border-radius: 100px;
background-color: red;
display: table-cell;
}

.anim1 {
-webkit-animation: circle1 35s infinite linear;
}
.anim1 .counterrotate {
-webkit-animation: ccircle1 35s infinite linear;
}
.anim2 {
-webkit-animation: circle2 35s infinite linear;
}
.anim2 .counterrotate {
-webkit-animation: ccircle2 35s infinite linear;
}
.anim3 {
-webkit-animation: circle3 35s infinite linear;
}
.anim3 .counterrotate {
-webkit-animation: ccircle3 35s infinite linear;
}
.anim4{
-webkit-animation: circle4 35s infinite linear;
}
.anim4 .counterrotate {
-webkit-animation: ccircle4 35s infinite linear;
}
@-webkit-keyframes circle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
@-webkit-keyframes ccircle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(-360deg)
}
}
@-webkit-keyframes circle2 {
from {
-webkit-transform: rotateZ(90deg)
}
to {
-webkit-transform: rotateZ(450deg)
}
}
@-webkit-keyframes ccircle2 {
from {
-webkit-transform: rotateZ(-90deg)
}
to {
-webkit-transform: rotateZ(-450deg)
}
}
@-webkit-keyframes circle3 {
from {
-webkit-transform: rotateZ(180deg)
}
to {
-webkit-transform: rotateZ(540deg)
}
}
@-webkit-keyframes ccircle3 {
from {
-webkit-transform: rotateZ(-180deg)
}
to {
-webkit-transform: rotateZ(-540deg)
}
}
@-webkit-keyframes circle4 {
from {
-webkit-transform: rotateZ(270deg)
}
to {
-webkit-transform: rotateZ(630deg)
}
}
@-webkit-keyframes ccircle4 {
from {
-webkit-transform: rotateZ(-270deg)
}
to {
-webkit-transform: rotateZ(-630deg)
}
}

Answer 1

如果我

能在菜单悬停上暂停 webkit 动画，将不胜感激。

由于这里涉及许多不同的元素，因此最简单的方法是

类似于

.outCircle:hover * {
animation-play-state: paused !important;
}

当容器元素悬停时，所有子元素的动画播放状态将设置为暂停，!important添加，以便它覆盖可能在其他地方设置不同的任何状态。

不过，你可以在这里使用选择器更具体一点，因为有两类元素是动画的，所以要这样做

.outCircle:hover .rotate, .outCircle:hover .counterrotate {
animation-play-state: paused !important;
}