时间戳

首页 > 解决方案 > CSS Hover - 悬停时淡入，悬停后立即消失

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

问题描述

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

这是一个示例片段：

.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 秒内淡入淡出，但在鼠标移开时立即消失？

标签： htmlcss

解决方案

您只能将转换转换为悬停状态，默认情况下它已授予所有状态。

一旦你将它用于: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>

推荐阅读