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

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

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

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 我建议增加悬停区域的半径，使点更加用户友好