CSS悬停-悬停时淡入，悬停时立即消失

Question

所以，我有一个悬停过渡，我想在悬停时缓和，但在悬停时是即时的。

下面是一个示例代码片段:

.invisible{
opacity: 0;
transition: 1s;
}
div{
cursor: pointer;
}
div:hover .invisible{
opacity: 100%;
}

<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>

我可以在CSS中改变什么来保持文本在1秒内褪色，但在鼠标移动时立即消失?

Answer 1

你可以只给悬停状态添加过渡，默认情况下它是给所有状态的。

一旦你将它用于:hover，转换将只发生在鼠标悬停，而不是鼠标离开。

.invisible {
opacity: 0;
}
div {
cursor: pointer;
}
div:hover .invisible {
opacity: 100%;
transition: 1s; /* moved this */
}

<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>

Answer 2

您只需要为这两种状态指定不同的转换持续时间。为悬停状态指定不等于零的持续时间。

(transition: 0s;为正常状态-因为您希望它为0，当从悬停状态返回到此状态时。如果没有为该状态设置转换持续时间，则可以是隐式的。)

.invisible{
opacity: 0;
/* transition: 0s; */
}
div{
cursor: pointer;
}
div:hover .invisible{
opacity: 100%;
transition: 1s;
}

<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>