在页面加载时显示元素5秒钟，然后在鼠标悬停时删除并再次显示，最好只显示CSS

我希望在图像上显示一些信息，我希望在页面加载时显示并保持5秒钟，而不是在悬停时消失并再次出现（也可以再停留5分钟，但不是必须的，只是为了在悬停时再次可见）

如果有帮助的话，解决方案不需要防止元素在不可见时占用空间

这是我到目前为止所做的，它可以工作，第一部分，在页面加载时显示并保持5秒钟：

    #image .details {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;  
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        opacity:0;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        opacity:0;
    }
}

---

但是，我无法再次显示它并继续悬停？

您当前没有任何CSS应用于悬停。我认为这应该达到你想要的结果：

#image .details {
    transition: opacity 1s ease-in;
}

#image:hover .details {
    opacity: 1;
}

您可能需要根据HTML标记（取决于光标实际悬停在哪个元素上）来调整此设置

---

您还应该考虑如何明确文本在hover上是可见的，以及如何确保移动用户可以在需要时看到文本。

您当前没有在hover上应用任何CSS。我认为这应该达到你想要的结果：

#image .details {
    transition: opacity 1s ease-in;
}

#image:hover .details {
    opacity: 1;
}

您可能需要根据HTML标记（取决于光标实际悬停在哪个元素上）来调整此设置

---

您还应该考虑如何明确文本在悬停时可见，以及如何确保移动用户可以在需要时看到文本。

如果元素在页面加载5秒后消失，您的用户如何知道他们可以再次悬停？看不见anymore@FabrizioCalderan图像仍然可见，只是文本（信息）？@FabrizioCalderan是的，图像始终可见，只有图像上的文本信息（大小、图像角的分辨率）应消失并在悬停时重新出现。如果元素在页面加载时在5秒后消失，您的用户如何知道他们可以再次将其悬停？看不见anymore@FabrizioCalderan图像仍然可见，只是文本（信息）？@FabrizioCalderan是的，图像始终可见，只有图像上的文本信息（大小、图像角落的分辨率）应该消失并在悬停时重新出现。我尝试了你的答案（甚至在我发布问题之前），但不知何故什么都没有。另外，我想让它消失/重新出现在桌面上，而不是移动用户（如果我设法让它重新出现的话）。不知何故，悬停的CSS代码不起作用，有什么变化吗？我试过你的答案（甚至在我发帖之前），但不知何故什么都没有。另外，我想让它消失/重新出现在桌面上，而不是移动用户（如果我设法让它重新出现的话）。不知何故，悬停的CSS代码不起作用，有什么变化吗？