javascript - 在取消悬停状态后保持 css 动画出现

Question

我有一个分区。当我将鼠标悬停在这个 div 中时，应该使用 css 动画弹出 3 个圆圈。但是当我将鼠标从 div 移开时，它们就消失了。我怎样才能让他们在不使用 jquery 的情况下留下来？这是我的代码:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  list-style: none;
  opacity: 0;
  transform: scale(0);
}

.circles li {
  margin-top: 10px;
}

.hoverover:hover + .circles .circle {
  animation: popin .25s forwards;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<div class="hoverover">Hover Over Me</div>

<ul class="circles">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>

Answer 1

要使圆圈与 .hoverover 元素保持一样长的时间或将它们悬停，您需要将 .circles 容器插入 .hoverover，并对 .circles 悬停和未悬停时的行为方式进行一些更改:

.circles {
  margin: 0;
  padding: 15px;
}

.hoverover {
  display: inline-block; /** limit it to the size and height of the text **/
  height: 20px;
}

.hoverover:not(:hover) > .circles { /** prevent opening circles by hovering it when invisible **/
  pointer-events: none;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  margin-top: 10px;
  list-style: none;
  opacity: 0;
  transform: scale(0);  
}

.hoverover:hover .circle {
  animation: popin .25s forwards;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<div class="hoverover">
  <span>Hover Over Me</span>

  <ul class="circles">
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
  </ul>

</div>

上一个答案:

当 .hoverover 元素悬停时，它会将动画 animation: popin .25s forwards; 应用于 .circle 元素。当悬停结束时，动画被移除，元素消失。

要解决在 .circle 上暂停的动画，并在 .hoverover 悬停时“恢复”它:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  list-style: none;
  opacity: 0;
  transform: scale(0);
  animation: popin .25s forwards;
  animation-play-state: paused;
}

.circles li {
  margin-top: 10px;
}

.hoverover:hover + .circles .circle {
  animation-play-state: running;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

<div class="hoverover">Hover Over Me</div>

<ul class="circles">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>