如何为CSS相邻兄弟选择器添加过渡延迟

嘿，这个问题我之前也踩过坑！CSS的transition确实没法直接对display属性生效——因为display: none会让元素直接从DOM布局中“消失”，过渡动画根本没有运行的基础，所以你加的transition-delay完全起不了作用。

问题根源 #

你的代码里用了display: none和display: block切换，这是瞬间完成的状态变化，CSS过渡只支持那些能“逐步变化”的属性（比如opacity、visibility、height、transform等），display不在这个列表里。

解决方案：用opacity + visibility 替代display #

我们可以用opacity（控制透明度）和visibility（控制元素是否可见）来模拟显示/隐藏，这两个属性都支持过渡，再配合transition-delay就能实现悬停1秒后显示的效果。

修改后的CSS代码：

.speech-bubble {
  /* 初始状态：透明且不可见 */
  opacity: 0;
  visibility: hidden;
  /* 可选：如果不想元素占空间，添加绝对定位脱离文档流 */
  position: absolute;
  /* 设置过渡：隐藏时延迟1秒生效（按需选择） */
  transition: opacity 0.2s ease, visibility 0s 1s;
}

#pass:hover + #pass_hover {
  opacity: 1;
  visibility: visible;
  /* 悬停后延迟1秒再显示 */
  transition-delay: 1s;
}

额外优化：鼠标离开后延迟隐藏 #

如果需要鼠标离开兄弟元素后，气泡也延迟1秒再消失，可以加上这个规则：

#pass:not(:hover) + #pass_hover {
  /* 离开时立即触发隐藏的过渡延迟 */
  transition-delay: 0s;
}

另一种方案：用CSS动画 #

如果你更习惯用动画，也可以用@keyframes来实现：

.speech-bubble {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

#pass:hover + #pass_hover {
  /* 1秒延迟后执行动画，动画结束后保持最终状态 */
  animation: showBubble 0.2s 1s forwards;
}

@keyframes showBubble {
  to {
    opacity: 1;
    visibility: visible;
  }
}

注意点 #

如果希望元素在隐藏时完全不占页面空间，一定要给.speech-bubble加上position: absolute，这样它就不会影响其他元素的布局啦。

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