CSS 在悬停时显示文本或标签

Question

我正在尝试创建一个菜单，当用户将鼠标悬停在其中时，标签或文本将出现在右侧，我设法使用以下代码创建了一个简单的效果。但我不知道如何在悬停时显示标签。

 #side-menu {
background-color : black;
color:white;
width:80px;
padding:20px;
list-style:none;
}

#side-menu:hover {
	width: 400px !important;
	display:inline-block;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul id="side-menu">
        <li>
             <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>
        </li>
    </ul>

我的目标是悬停时在右侧显示标签或文本，有什么建议可以实现吗？到目前为止，这是我的代码。提前致谢！

 <li><i class="fa fa-image fa-2x" style="margin-left:17px;"></i> <span class='label-menu'> Product Image <span></li>

.label-menu{
display:none;
}

原文由 KaoriYui 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当鼠标悬停在图标上时，您可以显示文本：

 span{
    display:none;
}
#side-menu {
    background-color : black;
    color:white;
    width:80px;
    padding:20px;
    list-style:none;
}

#side-menu:hover {
    width: 400px !important;
    display:inline-block;
}
#side-menu:hover span{
    display:inline-block;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul id="side-menu">
    <li>
        <li>
            <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>
            <span>Product Image</span
        </li>
    </li>
</ul>

原文由 Biby Cheriyan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这应该可以解决问题。

 #side-menu {
  background-color: black;
  color: white;
  width: 80px;
  padding: 20px;
  list-style: none;
  transition: ease-in-out all .4s;
  display: table;
}

li {
  width: 50%;
  height: 100%;
  display: table-cell;
}

.side-menu__label {
  float: left;
  width: 100px;
  opacity: 0;
  position: absolute;
  transition: ease-in-out all .4s;
}

#side-menu:hover {
  width: 400px;
}

#side-menu:hover .side-menu__label {
  opacity: 1;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<ul id="side-menu">
  <li>
    <i class="fa fa-image fa-2x" style="margin-left:17px;"></i>
  </li>
  <li>
    <div class="side-menu__label">Hello World</div>
  </li>
</ul>

原文由 Luke Paoloni 发布，翻译遵循 CC BY-SA 3.0 许可协议