鼠标悬停元素时p文本CSS transition过渡失效问题求助

你的过渡效果没生效的核心原因是：transition属性加错了元素。你把过渡规则写在了父元素.section-about--card上，但实际需要触发过渡的是子元素.about-card--details的height属性变化，过渡必须定义在要发生样式变化的目标元素上。

修改后的CSS代码如下：

.section-about--card {
  width:100%;
  height: 15rem;
  border: 1px solid black;
  & .about-card--details {  
    text-align: center;
    text-transform: capitalize;
    height: 0px;
    overflow: auto;
    /* 把过渡规则移到子元素这里 */
    transition: height 1s linear; 
  }
  &:hover .about-card--details{
    height:50px;
  }
}

补充说明： #

• 也可以用all代替height，但明确指定过渡属性（比如height）性能更好，避免不必要的样式过渡。
• 子元素初始height:0加上overflow:auto（或者hidden）的设置是正确的，确保初始状态下文本隐藏，hover时展开。

HTML部分无需修改：

<div class="section-about--card">
  <p class="about-card--details">
    some text
  </p>
</div>

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