是否可以制作延迟后显示的纯 CSS 工具提示？

Question

一个朋友有记忆问题，所以我有时会为他创建 CSS 叠加层，提供工具提示来帮助他完成任务。因为这些是叠加层，所以无法修改基础 HTML 或 Javascript。

创建纯 CSS 工具提示很简单，但当光标悬停在项目上时它们会立即出现。

如何创建仅在将鼠标悬停在目标项目上 x 秒后才显示的 CSS 工具提示？

该解决方案只需要与 Firefox 一起使用，但也欢迎跨浏览器实现。

Answer 1

你可以尝试 -moz-transition-delay: 1s（或任何数字），如果你想要跨浏览器，可以添加其他前缀（-webkit、-o 等）。

Answer 2

可以用 CSS transition delay 来完成。

<style>
a:after {
    opacity: 0;
    content: "";
}
a:hover:after { 
    opacity: 1;
    transition: opacity  0s linear 1s;
    content: " (Forgetfulness is a form of freedom. - Kahlil Gibran)";
}
</style>
<a href="#" class="tooltip">What am I?</a>

是否可以制作延迟后显示的纯 CSS 工具提示？

Is it possible to make pure CSS tooltips that display after a delay?

css

firefox

overlay

tooltip