html - 如何在鼠标移开后保持稳定的悬停效果

Question

即使在鼠标移开后如何设置我的悬停效果稳定？？？ 代码工作正常，但在鼠标移出 div 元素后 原始状态??

html

<div id="sme"></div>

CSS

#sme{
    width: 400px;
    height: 400px;
    border: 20px solid #06c999;
/* Rotate */
}
#sme:hover{
transition: all 1.9s ease;
 -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

}

Answer 1

需要考虑的是使用动画播放状态。然而，副作用是当您在动画尚未完成时移开鼠标，动画将暂停。

#sme {
  width: 400px;
  height: 400px;
  border: 20px solid #06c999;
  animation: rotatebox 2s ease forwards;
  animation-play-state: paused;
}

#sme:hover {
  animation-play-state: running;
}

@keyframes rotatebox {
  100% {
    transform: rotate(180deg);
  }
}

<div id="sme">A</div>