Javascript 取消覆盖状态后保持css动画显示

我有一个div。当我悬停在这个div中时，使用css动画应该会弹出3个圆圈。但是当我将鼠标移离div时，它们就消失了。如果不使用jquery，如何使它们保持不变？这是我的密码：

.circle{
宽度：50px；
高度：50px；
边界半径：50px；
背景颜色：蓝色；
列表样式：无；
不透明度：0；
变换：比例（0）；
}
李先生{
边缘顶部：10px；
}
.悬停：悬停+.圆圈.圆圈{
动画：popin.25s向前；
}
@关键帧popin{
80% {
转换：比例（1.15）；
}
100% {
不透明度：1；
变换：比例（1）；
}
}

悬停在我身上

要使圆圈停留在

.hoverover

元素的时间内，或者它们处于悬停状态，您需要将

.circles

容器插入

.hoverover

，并对

.circles

在悬停和未悬停状态下的行为方式进行一些更改：

.circles{
保证金：0；
填充：15px；
}
.悬停{
显示：内联块；/**将其限制为文本的大小和高度**/
高度：20px；
}
.hoverover:not（：hover）>。圆圈{/**在不可见时将其悬停以防止打开圆圈**/
指针事件：无；
}
.圆圈{
宽度：50px；
高度：50px；
边界半径：50px；
背景颜色：蓝色；
边缘顶部：10px；
列表样式：无；
不透明度：0；
变换：比例（0）；
}
悬停，盘旋{
动画：popin.25s向前；
}
@关键帧popin{
80% {
转换：比例（1.15）；
}
100% {
不透明度：1；
变换：比例（1）；
}
}

在我上空盘旋

要使圆圈停留在

.hoverover

元素停留的时间内或它们处于悬浮状态，您需要将

.circles

容器插入

.hoverover

，并对

.circles

在悬浮状态下的行为方式进行一些更改，而不是在悬浮状态下：

.circles{
保证金：0；
填充：15px；
}
.悬停{
显示：内联块；/**将其限制为文本的大小和高度**/
高度：20px；
}
.hoverover:not（：hover）>。圆圈{/**在不可见时将其悬停以防止打开圆圈**/
指针事件：无；
}
.圆圈{
宽度：50px；
高度：50px；
边界半径：50px；
背景颜色：蓝色；
边缘顶部：10px；
列表样式：无；
不透明度：0；
变换：比例（0）；
}
悬停，盘旋{
动画：popin.25s向前；
}
@关键帧popin{
80% {
转换：比例（1.15）；
}
100% {
不透明度：1；
变换：比例（1）；
}
}

在我上空盘旋

您只需暂停动画即可

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

然后在悬停状态下再次运行它

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

在我上空盘旋





.圆圈{
宽度：50px；
高度：50px；
边界半径：50px；
背景颜色：蓝色；
列表样式：无；
不透明度：0；
变换：比例（0）；
}
李先生{
边缘顶部：10px；
}
.圆圈，圆圈{
动画：popin.25s向前；
-webkit动画播放状态：暂停；/*Chrome、Safari、Opera*/
动画播放状态：暂停；
}
.悬停：悬停+.圆圈.圆圈{
-webkit动画播放状态：正在运行；/*Chrome、Safari、Opera*/
动画播放状态：运行；
}
@关键帧popin{
80% {
转换：比例（1.15）；
}
100% {
不透明度：1；
变换：比例（1）；
}
}

您只需暂停动画即可

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

然后在悬停状态下再次运行它

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

在我上空盘旋





.圆圈{
宽度：50px；
高度：50px；
边界半径：50px；
背景颜色：蓝色；
列表样式：无；
不透明度：0；
变换：比例（0）；
}
李先生{
边缘顶部：10px；
}
.圆圈，圆圈{
动画：popin.25s向前；
-webkit动画播放状态：暂停；/*Chrome、Safari、Opera*/
动画播放状态：暂停；
}
.悬停：悬停+.圆圈.圆圈{
-webkit动画播放状态：正在运行；/*Chrome、Safari、Opera*/
动画播放状态：运行；
}
@关键帧popin{
80% {
转换：比例（1.15）；
}
100% {
不透明度：1；
变换：比例（1）；
}
}

你真是个天才！我能让它们在一段时间后消失吗？我想保留它们，这样用户可以点击其中一个，如果他愿意的话，在解除控制后，它们应该消失。当我看到它们时，它们仍然存在unhover@OriDrori它在其他代码上不起作用我不知道为什么：/你在用什么浏览器？你真是个天才！我能让它们在一段时间后消失吗？我想保留它们，这样用户可以点击其中一个，如果他愿意的话，在解除控制后，它们应该消失。当我看到它们时，它们仍然存在unhover@OriDrori其他代码不起作用我不知道为什么：/你用的是什么浏览器？我能让它们在一段时间后消失吗？我想保留它们，这样用户可以点击其中一个，如果他想，在解除控制后，它们应该消失。我能让它们消失一段时间吗？我想保留它们，这样用户可以点击其中一个，如果他愿意的话，在解除控制后，它们应该消失