将页面上的元素显示5秒钟，然后删除并再次悬停时再次显示，最好仅CSS

Question

我想在图像上显示一些信息，我想在页面加载时显示它并保持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;
    }
}

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

Answer 1

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

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

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