用悬停效果淡出

Question

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

然而，当我将淡出动画转换应用于两个图像时，第一个图像（重影）文本不再出现。

第二张图像（蝴蝶）需要与第一张图像具有相同的效果;这是淡出和悬停效应。

这是我设法从JSFIDDLE

做的示例

以下是我尝试过的淡出过渡：

{{1}}

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

非常感谢提前。

Answer 1

  

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

为了实现这一目标，您只需在display：none中设置第二个图像;当你的第一张图像淡出时，你将它设置为display：none;并设置第二个图像显示：block;

您也可以使用绝对定位。

现在关于你的动画问题，是你要制作动画的图像或文字，如果它是图像，应该触发哪个事件？

另外，你可以将功能动画添加到你的JSFiddle中吗？