如何用CSS实现Pinterest式仅退出延迟的图片悬停效果？

完全可以用纯CSS实现！核心就是利用transition属性的延迟参数，给「鼠标离开」的动作加延迟，「鼠标悬停」时直接触发效果。

核心逻辑 #

CSS的transition属性可以拆成四个值：transition: [过渡属性] [过渡时长] [延迟时间] [过渡曲线]。咱们要做的是：

• 非悬停状态（默认状态）：给过渡效果加延迟（比如0.2秒），这样鼠标移开时不会立刻消失
• 悬停状态（:hover）：把延迟设为0，这样鼠标一放上去就立刻触发效果

完整代码示例 #

先写基础的HTML结构，一个包含图片和详情的卡片：

<div class="card">
  <div class="img-wrap">
    <img src="你的图片地址" alt="海报">
  </div>
  <div class="card-details">
    <h3>海报标题</h3>
    <p>海报简介</p>
  </div>
</div>

然后是CSS样式，重点看transition的设置：

/* 卡片容器：用来定位详情层 */
.card {
  position: relative;
  width: 300px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
}

/* 图片容器：用来加遮罩层 */
.img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填满容器 */
}

/* 遮罩层：鼠标悬停时变暗 */
.img-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
  opacity: 0; /* 默认隐藏 */
  /* 默认状态：过渡时长0.3秒，延迟0.2秒 */
  transition: opacity 0.3s 0.2s ease;
}

/* 详情层：默认隐藏在卡片下方 */
.card-details {
  position: absolute;
  bottom: -100%; /* 默认移到卡片外面 */
  left: 0;
  width: 100%;
  padding: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  /* 默认状态：过渡时长0.3秒，延迟0.2秒 */
  transition: bottom 0.3s 0.2s ease, opacity 0.3s 0.2s ease;
  opacity: 0;
}

/* 鼠标悬停时的状态 */
.card:hover .img-wrap::after {
  opacity: 1; /* 显示遮罩 */
  /* 悬停时取消延迟，立刻触发 */
  transition-delay: 0s;
}

.card:hover .card-details {
  bottom: 0; /* 移回卡片内 */
  opacity: 1; /* 显示详情 */
  /* 悬停时取消延迟，立刻触发 */
  transition-delay: 0s;
}

效果说明 #

• 鼠标悬停：遮罩和详情立刻显示，没有任何延迟
• 鼠标移开：遮罩和详情会等待0.2秒才开始消失，快速划过多张卡片时，前几张的延迟效果还没结束，就会形成你说的「变暗轨迹」

新手注意点 #

1. 延迟时长可以自己调：把0.2s改成你想要的时间，比如0.1秒或0.3秒
2. 过渡属性可以更精准：如果不想用all（示例里用了具体属性opacity和bottom），可以指定要过渡的CSS属性，避免不必要的性能消耗
3. object-fit: cover是让图片填满容器同时保持比例，新手可以记住这个常用属性

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