箭头图标hover渐进显示效果遇阻：height设0无法隐藏div

你遇到的问题主要有两个核心原因：一是CSS选择器匹配错误，二是仅设置height:0%无法彻底隐藏元素且无法触发过渡效果。下面是完整的修正方案：

问题拆解 #

• HTML中的div使用的是id="down-arrow-div"，但CSS里写的是类选择器.down-arrow-div，导致样式完全不生效。
• 用height:0%时，如果父元素没有设置固定高度，0%会被浏览器解析为auto，元素不会被隐藏；另外就算高度设为0，元素内的图标可能因为line-height、padding等默认属性依然显示。

修正后的代码 #

HTML（保持原结构不变）

<div id="down-arrow-div" class="text-center down-arrow" >
     <i class="fas fa-chevron-down"></i>
</div> 

CSS

#down-arrow-div {
  height: 0;
  overflow: hidden;
  /* 清除默认间距，确保元素彻底隐藏 */
  padding: 0;
  margin: 0;
  line-height: 0;
  /* 添加过渡动画，控制渐变速度 */
  transition: height 0.3s ease;
}

/* 鼠标悬停时设置高度，显示箭头 */
#down-arrow-div:hover {
  height: 20px; /* 数值根据你的图标大小自行调整 */
  line-height: 20px; /* 让图标垂直居中 */
}

补充说明 #

• 如果想用百分比高度，必须给父元素设置明确的高度值，比如父元素设height: 50px，那么悬停时可以设置height:100%。
• overflow:hidden是实现渐变效果的关键，它会裁剪超出元素高度的内容，确保高度为0时图标完全隐藏，同时配合transition属性实现平滑的高度变化。

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