CSS实现链接图片预览：hover延迟1秒显示、移开立即隐藏

核心原理说明：transition 属性支持在元素的不同选择器状态下独立配置，不需要借助JavaScript就能实现「正向状态切换带固定延迟、反向状态切换无延迟」的逻辑。
你之前遇到的双向延迟问题，本质是把带1秒延迟的过渡参数统一写在了元素的基础选择器上，导致进入显示态、回到隐藏态两个方向的状态切换都会继承同一个延迟值，才会出现鼠标移出后预览依旧停留1秒才消失的问题。

具体实现代码 #

基础HTML结构 #

<a href="#" class="preview-trigger">
  点击查看详情的文本链接
  <img class="preview-image" src="预览图地址" alt="链接配图预览">
</a>

核心CSS配置 #

.preview-trigger {
  position: relative;
}
.preview-image {
  /* 基础态：预览图默认隐藏的定位与样式 */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  visibility: hidden;
  opacity: 0;
  /* 隐藏态专属过渡：无任何延迟，切回隐藏时立即生效 */
  transition: 
    visibility 0s linear 0s,
    opacity 0.2s linear 0s;
}
/* 悬停触发的显示态 */
.preview-trigger:hover .preview-image {
  visibility: visible;
  opacity: 1;
  /* 显示态专属过渡：单独配置1秒延迟，仅在切到显示状态时生效 */
  transition: 
    visibility 0s linear 1s,
    opacity 0.2s linear 1s;
}

关键逻辑说明 #

• 鼠标移出链接范围时，元素会从:hover触发态切回基础隐藏态，此时会应用基础类上配置的无延迟过渡参数，预览会立刻消失，完全满足即时隐藏的要求。
• 鼠标悬停在链接上时，元素进入:hover触发态，此时会应用悬停规则上配置的带1秒延迟的过渡参数，等待1秒后预览才会显示，匹配延迟展示的需求。
• 注意不要使用display: none控制预览图的显隐，这是不可过渡的属性，会直接跳过过渡逻辑；使用visibility配合opacity控制显隐，既可以正常触发过渡，也能避免元素占位干扰页面布局。

内容的提问来源于stack exchange，提问作者Subhankar Mukherjee