时间戳

首页 > 解决方案 > 在页面加载时显示元素 5 秒，然后在悬停时再次删除并再次显示，最好仅 CSS

css - 在页面加载时显示元素 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;
    }
}

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

标签： csscore-animationopacitykeyframemousehover

解决方案

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

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

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

您可能需要根据您的 HTML 标记进行调整（取决于光标实际悬停在哪个元素上）。

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

推荐阅读