鼠标移出时立即结束 CSS 过渡

Question

我想使用 CSS 显示链接的图像预览。行为是这样的，当用户将鼠标悬停在链接上时，图像预览会在 1 秒后出现，但在悬停时，预览会立即被删除。现在为确保 1 秒后出现预览，我使用了 transition 属性作为 transition-property: visibility; transition-delay: 1s。虽然这确保了预览在 1 秒后可见，但由于明显的原因，它从可见到隐藏的转换也延迟了 1 秒。我是否可以确保只有从隐藏到可见的转换需要 1 秒，而使用 CSS 则相反？

Answer 1

很遗憾你没有显示代码。

但我假设您在类或 id 上有 transition 属性...而 :hover 只是更改了一个属性，这对于在鼠标进出时应用过渡非常有用。

奇怪的是你提到了visibility 属性，它不能被转换，因为它不是一个“数字”属性。也许你的意思是opacity...

如果您在 :hover 规则中有 transition 属性...它适用于悬停（鼠标输入时读取），但不适用“非悬停”（鼠标退出）。

#target{
  opacity: 0;
  height: 400px;
  width: 400px;
  background: blue;
}

#target:hover{
  opacity: 1;
  transition: 1s;
}

<div id="target"></div>