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

编程问答 2022-05-24

问题描述

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

这是一个示例片段：

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

解决方法

您只能将过渡过渡到悬停状态，默认情况下它会过渡到所有状态。

一旦您将其用于 :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>

,

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

(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>

html