淡入时CSS转换延迟，淡出时无延迟

我正在学习如何创建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秒钟内消失，并在我停止悬停时立即开始消失？

在

：hover

类中定义

transition

属性。像这样：

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

.tooltip-text {
  opacity: 0;
  visibility: hidden;
}

---

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

.box{
宽度：100px；
高度：30px；
背景色：红色；
}
.工具提示{
不透明度：0；
可见性：隐藏；
}
.box:悬停。工具提示{
不透明度：1；
能见度：可见；
过渡：所有500ms；
过渡延迟：2s；
}

这是工具提示。