Question

我有一个div。当我将鼠标悬停在此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，并对{{1}的方式进行一些更改徘徊时表现得很好，而不是徘徊：

＆＃13;

.circles

＆＃13;

.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);
  }
}

＆＃13;

上一个回答：

当<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上暂停动画，然后恢复＆＃34;＆＃34;当.circle被徘徊时：

＆＃13;

.hoverover

＆＃13;

.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);
  }
}

＆＃13;

Answer 2

您只需要使用

暂停动画

-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;

在悬停时再次运行

-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;

<html>
<div class="hoverover">Hover Over Me</div>

<ul class="circles">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: blue;
  list-style: none;
  opacity: 0;
  transform: scale(0);
}

.circles li {
  margin-top: 10px;
}

.circles .circle{
   animation: popin .25s forwards;
   -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}
.hoverover:hover + .circles .circle {
 -webkit-animation-play-state: running; /* Chrome, Safari, Opera */
    animation-play-state: running;
}

@keyframes popin {
  80% {
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

</html>

在unhovering状态后保持css动画出现

2 个答案: