缩略图悬停后transition delay失效：移出后图片无法保持显示

我来帮你搞定这个鼠标移出缩略图后大图无法保持显示的问题，咱们一步步拆解分析：

1. 先理清核心矛盾：过渡对象错配 #

你提到想用transition: background-image .1s 604800s;实现延迟，但目前的问题是——你悬停缩略图时生成了新的绝对定位div，而不是替换.rolled元素的背景图。这就导致你写在.rolled上的过渡规则完全没作用，相当于给错了对象！

2. 方案一：修正过渡到动态生成的div上 #

如果想保留“生成绝对定位div”的逻辑，那得把延迟过渡加在这个动态div上：

• 给动态生成的大图div（比如.rolled-thumb-1）加基础样式：

  .rolled-thumb-1 {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    /* 关键：移出时延迟隐藏，悬停时立即显示 */
    transition: opacity .1s, visibility 0s 604800s;
  }
  

• 悬停缩略图时触发显示：

  .thumb-container:hover .rolled-thumb-1 {
    opacity: 1;
    visibility: visible;
    /* 取消延迟，立即显示 */
    transition-delay: 0s;
  }
  

  这里用visibility配合opacity，是为了避免隐藏时元素仍占据空间，同时保证延迟逻辑生效。

3. 方案二：回到背景图替换的预期逻辑 #

如果你更倾向于用.rolled元素替换背景图的方案，那得调整触发逻辑，同时解决background-image过渡的兼容性问题：

• 首先，确保悬停时是给.rolled修改背景图，比如用兄弟选择器（假设缩略图和.rolled是同级）：

  .rolled {
    background-size: cover;
    background-image: url('初始大图路径');
    /* 用伪元素模拟背景图过渡，兼容性更强 */
    position: relative;
  }
  .rolled::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('悬停大图路径');
    background-size: cover;
    opacity: 0;
    transition: opacity .1s 604800s;
    z-index: 1;
  }
  /* 悬停缩略图时显示伪元素 */
  .thumb-item:hover ~ .rolled::after {
    opacity: 1;
    transition-delay: 0s;
  }
  

  为什么用伪元素？因为部分浏览器对background-image的过渡支持有限，用opacity过渡模拟切换效果更可靠。

4. 最后排查几个常见坑点 #

• 检查是否有其他CSS规则覆盖了过渡属性，比如高优先级选择器写了transition: none;
• 确保动态生成的div没有被设置为display: none;——display属性无法过渡，会直接打断延迟效果
• 如果用JS生成div，要在创建元素时就添加上过渡样式，不要后续动态追加，否则过渡可能不生效

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