使用悬停效果淡入淡出

Question

我需要两个图像（幽灵和蝴蝶）都具有淡入和淡出效果。当我将鼠标悬停在第一张图片（幽灵）上时，我需要弹出一些文本。我设法做到了。

但是，当我将淡入淡出动画过渡应用到两个图像时，第一张图像的（幻影）文本不再出现。

第二张图片（蝴蝶）需要和第一张效果一样；这是淡入淡出和悬停效果。

这是我从JSFIDDLE 设法做的示例

这是我尝试过的淡入淡出过渡：

.tooltip-wrap{
    -webkit-animation:fadeInOut 5s;
    opacity:0;
    -moz-animation-delay: 32s;
    -webkit-animation-delay: 32s;
    -o-animation-delay: 32s;
    animation-delay: 32s;
}

另外，我需要两个图像彼此重叠。第一张图片淡出后，第二张图片应在同一位置淡入（重叠）。

非常感谢。

Answer 1

另外，我需要两个图像彼此重叠。第一张图片淡出后，第二张图片应在同一位置淡入（重叠）。

为了实现这一点，您可以简单地将第二张图片设置为 display:none;当您的第一张图像完成淡出时，您将其设置为 display:none;并将第二张图片设置为 display:block;

你也可以使用绝对定位。

关于你现在的动画问题，是你想要动画的图像还是文本，如果是图像，应该触发哪个事件？

另外，您能否将功能动画添加到您的 JSFiddle 中？