#图标:悬停+#文本转换为+#文本部分

Question

当我将鼠标悬停在图标上时，文本应该会出现，到目前为止还不错，但我希望它能顺利过渡到视图中。我似乎找不到做那件事的方法。

#vegicon {
opacity: 0.6;
transition: 0.5s;
color: mediumseagreen;
margin-left: 7px;
}
#vegicontext {
display: none;
font-family: 'Lato', sans-serif;
color: mediumseagreen;
font-size: 0.9em;
margin-left: 1px;
}
#vegicon:hover {
opacity: 1;
text-shadow: 1px 1px 2px darkgray;
}
#vegicon:hover+#vegicontext {
display: inline;
}

<span id="vegicon"><i class="fas fa-seedling"></i></span>
<span id="vegicontext">Veggy</span>

Answer 1

不能设置display属性的动画，但可以设置opacity的动画。

此外，还需要为动画添加transition，例如transition: opacity .5s ease-in;

#vegicon{
opacity: 0.6;
transition: 0.5s;
color: mediumseagreen;
margin-left: 7px;
}
#vegicontext{
opacity:0;
font-family: 'Lato', sans-serif;
color: mediumseagreen;
font-size: 0.9em;
margin-left: 1px;
transition: opacity .5s ease-in;
}
#vegicon:hover{
opacity: 1;
text-shadow: 1px 1px 2px darkgray;
}
#vegicon:hover + #vegicontext{
opacity:1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<span id="vegicon"><i class="fas fa-seedling"></i></span>
<span id="vegicontext">Veggy</span>

您也可以设置max-width属性的动画，但请确保max-width不小于您正在设置动画的最宽元素：

.container {
display: flex;
}
.icon-container {
display: flex;
}
.vegicon{
opacity: 0.6;
transition: 0.5s;
color: mediumseagreen;
margin-left: 7px;
}
.vegicontext{
opacity: 0;
overflow: hidden;
max-width: 0;
font-family: 'Lato', sans-serif;
color: mediumseagreen;
font-size: 0.9em;
margin-left: 2px;
transition: all .5s ease-in;
}
.vegicon:hover{
opacity: 1;
text-shadow: 1px 1px 2px darkgray;
}
.vegicon:hover + .vegicontext {
opacity: 1;
/* this may need to be changed depending on the max length of your text */
max-width: 50px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div class="container">
<div class="icon-container">
<span class="vegicon"><i class="fas fa-seedling"></i></span>
<div class="vegicontext">Veggy</div>
</div>
<div class="icon-container">
<span class="vegicon"><i class="fas fa-seedling"></i></span>
<div class="vegicontext">Veggy</div>
</div>
<div class="icon-container">
<span class="vegicon"><i class="fas fa-seedling"></i></span>
<div class="vegicontext">Veggy</div>
</div>
</div>