css 更改包含图标高度的div

qojgxg4l 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(101)

我试图创建一个效果，使箭头图标可见，悬停时逐渐增加其高度，我试图进行过渡，但我无法将此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，但它是二进制值，效果不一样

3条答案

使用opacity属性而不是visibility属性。设置字体高度而不是元素高度，如下面的代码片段所示。我在父div周围添加了边框，这样你就可以用鼠标瞄准一些东西。
第一个

为了隐藏一个元素之外的所有内容，你必须对它应用overflow: hidden;。在这个例子中，应用到#down-arow-div。（注意错误，在你的例子中它是“.down-error-div”，而它应该是“#down-error-div”（ID选择器而不是类选择器）

因为你的div有一些内容，即使你把高度设置为零，它也会有它的孩子的高度。你改变i标签的字体大小，它会很好。