使用关键帧在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;

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

这是我正在使用的codepen：

http://codepen.io/aslenwhitmore/pen/rxLYgQ?editors=0100

所以有人能告诉我应该在哪里插入淡出？ 谢谢！

Answer 1

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

See my codepen fork for a working example

由于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.然后将其Range("B2").Cells(i + 1).RESIZE(1, 6).Clear 不透明度设置为1.现在将:hover位更改为animation: fade-in 1s。