使用关键帧在 mouseout 上淡出？

Question

我正在使用关键帧动画和标记，当您将鼠标悬停在它们上方时，会出现信息或图片。我添加了淡入，但我不知道如何让它淡出。
我有关键帧部分：

@keyframes fadeout {
0% {
  opacity: 1;}
100% {opacity: 0;}
}
.fadeout {
-webkit-animation-name: fadeout;
animation-name: fadeout;
}

这是动画部分（？）我想插入：

animation-duration: 0.5s;
animation-name: fadeout;

我想我的问题是我不知道如何插入它。

这是我正在使用的代码笔：

谁能告诉我应该在哪里插入淡出？谢谢！

Answer 1

您可以使用 transition 属性在悬停时触发不透明状态来达到您想要的效果。不需要 javascript，因为 CSS 允许您在悬停或其他状态下操作选择器的子项。

由于 CSS 无法转换 display 属性，我们将只使用不透明度和 z-index.

z-index会隐藏文档下的元素(z-index:-1)，激活后会变成999

悬停代码

&:hover .map-marker-info {
    opacity:1;
    z-index:999;
}

静态代码

&-marker-info {
   display: block;
   transition:0.3s;
   opacity: 0;
   z-index: -1;
}

P.S我建议增加悬停区域的半径，使点更友好

Answer 2

只需将动画更改为过渡即可。

将信息弹出窗口的不透明度设置为 0。然后将其 :hover 不透明度设置为 1。现在将 animation: fade-in 1s 位更改为 transition: opacity 1s。

fadeout on mouseout using keyframes?