我试图创建一种效果，使箭头图标在悬停时逐渐增加其高度可见，我试图进行过渡，但我无法将此div设置为不可见将div高度设置为0，
<div id="down-arrow-div" className="text-center down-arrow" >
<i className="fas fa-chevron-down"></i>
</div>
Css不起作用
.down-arrow-div{
height:0%;
}
我可以用visibility隐藏div，但它是二进制值，效果不同
不使用可见性，而使用不透明度属性.将字体高度而不是元素高度设置为下面的代码段.我在父div周围添加了一个边框，这样您的鼠标就有了目标.
#down-arrow-div {
width: 5rem;
height: 5rem;
border: 1px solid gray;
display: grid;
place-items: center;
}
#down-arrow-div>i {
opacity: 0;
font-size: 1rem;
transition: all 0.5s;
}
#down-arrow-div:hover>i {
opacity: 1;
font-size: 2rem;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="down-arrow-div" class="text-center down-arrow">
<i class="fas fa-chevron-down"></i>
</div>