背景图片hover过渡延迟异常问题求助（无需JavaScript）

我来帮你拆解下这个问题，核心原因其实和CSS过渡的特性以及你的实现逻辑有关：

1. 为什么background-image的过渡设置无效？ #

首先要明确：CSS的transition属性并不支持background-image这个值。绝大多数浏览器都不会对背景图片的切换应用过渡效果，不管你把过渡时长设为0s还是其他值，这个设置本质上都是无效的。

你之前看到的“移出缩略图后主图保持状态”其实是个非标准的兼容行为：当你给主容器设置了transition延迟后，浏览器虽然没法过渡背景图，但会延迟状态的回退——但这不是可靠的实现方式，不同浏览器可能表现不一致。

2. hover时无法维持状态的原因 #

因为background-image不支持过渡，加上你的选择器/过渡逻辑可能存在冲突：

• 当你hover缩略图时，主容器的背景图被强制切换，但由于没有过渡支持，浏览器可能无法稳定维持这个hover状态下的样式；
• 如果你只给主容器的默认状态加了延迟，而hover状态下的样式没有覆盖这个延迟逻辑，就会导致hover时样式切换出现“闪回”，没法保持切换后的主图。

3. 纯CSS实现可靠Rollover的正确方案 #

既然background-image过渡不可靠，我们可以改用支持过渡的属性（比如opacity）来实现，下面是一个可复用的示例：

HTML结构 #

<div id="container">
  <!-- 主图区域：默认图 + 各缩略图对应的hover图 -->
  <div class="main-img default"></div>
  <div class="main-img hover-1"></div>
  <div class="main-img hover-2"></div>
  
  <!-- 缩略图区域 -->
  <div class="thumbnail thumb-1"></div>
  <div class="thumbnail thumb-2"></div>
</div>

CSS实现 #

body { margin: 0; padding: 0; }

#container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* 主图通用样式：绝对定位铺满容器 */
.main-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0s 2s; /* 移出时延迟2秒再隐藏 */
}

/* 默认主图：初始显示 */
.main-img.default {
  background-image: url('default.jpg');
  opacity: 1;
}

/* hover主图：初始隐藏 */
.main-img.hover-1 {
  background-image: url('hover1.jpg');
  opacity: 0;
}
.main-img.hover-2 {
  background-image: url('hover2.jpg');
  opacity: 0;
}

/* 缩略图hover逻辑 */
.thumbnail.thumb-1:hover ~ .main-img.default {
  opacity: 0;
  transition: opacity 0s; /* hover时立刻隐藏默认图 */
}
.thumbnail.thumb-1:hover ~ .main-img.hover-1 {
  opacity: 1;
  transition: opacity 0s 2s; /* 移出时保持2秒 */
}

.thumbnail.thumb-2:hover ~ .main-img.default {
  opacity: 0;
  transition: opacity 0s;
}
.thumbnail.thumb-2:hover ~ .main-img.hover-2 {
  opacity: 1;
  transition: opacity 0s 2s;
}

/* 缩略图样式示例 */
.thumbnail {
  width: 100px;
  height: 100px;
  margin: 20px;
  float: left;
  cursor: pointer;
}
.thumb-1 { background-image: url('thumb1.jpg'); }
.thumb-2 { background-image: url('thumb2.jpg'); }

这个方案的核心是用opacity的过渡来控制不同主图的显示/隐藏，完全依赖标准的CSS过渡特性，不会出现你遇到的hover状态不稳定问题。

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