求助：按钮悬停文本切换transition-delay设置无效问题（附代码）

你尝试用transition-delay没效果的核心原因是：display: none和content这类属性不支持CSS过渡——过渡只能作用于存在中间渐变值的属性（比如opacity、visibility、尺寸等）。

下面是调整后的代码，用opacity和visibility实现延迟切换效果，同时保留你想要的交互逻辑：

修改后的CSS代码 #

body{
  background-color: black;
}
.column{
  position: fixed;
  left:0;
  bottom:0;
  top:55px;
  width:72px;
  z-index: 200;
  padding-top: 20px;
}
.about,
.skills {
  font-size:72px;
  width: 10em;
  text-align: left;
  border:none;
  background-color: black;
  color:red;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 初始状态：伪元素透明且不可见 */
.about:after,
.skills:after {
  content: "";
  position: absolute;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s 3s, visibility 0s 3s; /* 延迟3秒触发状态变化 */
}

/* 初始状态：原文本正常显示 */
.about span,
.skills span {
  transition: opacity 0s 3s, visibility 0s 3s;
}

/* 悬停状态：原文本立即隐藏，伪元素延迟3秒显示 */
.about:hover span {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}
.about:hover:after {
  content: "ABOUT";
  opacity: 1;
  visibility: visible;
  transition-delay: 3s;
}

.skills:hover span {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}
.skills:hover:after {
  content: "SKILLS";
  opacity: 1;
  visibility: visible;
  transition-delay: 3s;
}

对应的HTML代码（无需修改） #

<h1>
  <div class="column">
    <button class="about" data-hover="ABOUT">
      <span>
        I
      </span>
    </button>
    <button class="skills">
      <span>
        AM
      </span>
    </button>
  </div>
</h1>

关键改动说明： #

• 给按钮添加position: relative，让伪元素能相对于按钮定位，避免布局混乱
• 用opacity（透明度）和visibility（可见性）替代display: none，这两个属性支持CSS过渡
• 拆分过渡逻辑：悬停时原文本立即隐藏，伪元素延迟3秒显示；离开悬停时，元素会按设置的延迟恢复初始状态

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