CSS过渡延迟在淡入时，但淡出时没有延迟

Question

我正在学习有关如何创建CSS工具提示的教程。 一切正常，但我想进行一项修改。 我希望工具提示在我将鼠标悬停在项目上 3 秒后显示，但在我停止将鼠标悬停在项目上时立即淡出。 这是我现在拥有的(相关(代码：

.tooltip:hover .tooltip-text {
opacity: 0.7;
visibility: visible;
}
.tooltip-text {
...
opacity: 0;
transition: all 500ms;
transition-delay: 3s;
visibility: hidden;
...
}

这几乎是有效的。它延迟显示工具提示 3 秒钟，就像我想要的那样。 但是，它也会延迟删除工具提示(我不想要(。 如何修改代码，使工具提示在我用鼠标悬停后 3 秒内淡出，并在停止悬停时立即开始淡出？

Answer 1

定义类:hovertransition属性。喜欢这个：

.tooltip:hover .tooltip-text {
opacity: 0.7;
visibility: visible;
transition: all 500ms;
transition-delay: 3s;
}
.tooltip-text {
opacity: 0;
visibility: hidden;
}

---

请参阅下面的工作演示。(尝试将鼠标悬停在红色框上(

.box {
width: 100px;
height: 30px;
background-color: red;
}
.tooltip {
opacity: 0;
visibility: hidden;
}
.box:hover .tooltip {
opacity: 1;
visibility: visible;
transition: all 500ms;
transition-delay: 2s;
}

<div class="box">
<div class="tooltip">
This is tooltip.
</div>
</div>