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

Question

一个 friend 有内存问题，所以我有时会为他创建 CSS 叠加层，提供工具提示来帮助他完成任务。因为这些是叠加层，所以无法修改底层的 HTML 或 Javascript。

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

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

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

Answer 1

可以用 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>