html - <p> 标签不会停留在悬停状态，即使悬停在它上面

Question

我有一个 <p>标签，当我将鼠标悬停在它上面时，我希望它播放带有@keyframes 的动画。它完美地完成了动画，但是当动画结束时，它会恢复到悬停之前的状态。有谁知道我做错了什么？

编辑:如果您更愿意使用 fiddle ，请检查 this出去。 按钮闪烁红色的原因纯粹是出于测试原因。

我的HTML如下:

<div id="imgOver9" class="imgOver">
     <p id="pLink9" class="pLink" href="home.html">Chillin', relaxin', maxin' all cool and shootin' some b-ball outside of school</p>
</div>

这是 <p> 的 CSS元素:

.pLink{
    position:absolute;
    left:1vw;
    top:-1vw;
    height:24vw;
    width:24vw;
    opacity:0;

    text-align:justify;

    display:block;

    font-family: 'Antic Didone', 'serif';

    z-index:1;

    background-color:red;

    font-size:2vw;
}

.pLink:hover{
  animation: pLink linear 0.1s;
  animation-iteration-count: 1;
  transform-origin:;
  -webkit-animation: pLink linear 0.1s;
  -webkit-animation-iteration-count: 10;
  -webkit-transform-origin: ;
  -moz-animation: pLink linear 0.1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: pLink linear 0.1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: pLink linear 0.1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;
}

@keyframes pLink{
  0% {
    opacity:0;
    color:#000000
  }
  100% {
    opacity:1;
    color:#8C8C96;
  }
}

@-moz-keyframes pLink{
  0% {
    opacity:0;
    color:#000000
  }
  100% {
    opacity:1;
    color:#8C8C96;
  }
}

@-webkit-keyframes pLink {
  0% {
    opacity:0;
    color:#000000
  }
  100% {
    opacity:1;
    color:#8C8C96;
  }
}

@-o-keyframes pLink {
  0% {
    opacity:0;
    color:#000000
  }
  100% {
opacity:1;
color:#8C8C96;
  }
}

@-ms-keyframes pLink {
  0% {
    opacity:0;
    color:#000000
  }
  100% {
    opacity:1;
    color:#8C8C96;
  }
}

这是父 div 的 CSS:

.imgOver{
    opacity:0%;
    width:26vw;
    height:26vw;

}
.imgOver:hover{
  animation: imgOver linear 0.1s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: imgOver linear 0.1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: imgOver linear 0.1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: imgOver linear 0.1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: imgOver linear 0.1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

}

@keyframes imgOver{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes imgOver{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes imgOver {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes imgOver {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes imgOver {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

我已经研究了好几个小时了，但我找不到缺陷。如果有人能解决我的问题，我将不胜感激。

Answer 1

您将需要使用animation: pLink 0.1s forwards; 以保持动画的最终状态。

这是一个演示 fiddle