鼠标悬浮图标，图标下方出现div

您可以使用CSS中的:hover伪类和position属性来实现这个效果。

首先，在HTML中添加一个包含图标和div的容器元素，如下所示：

<div class="icon-container">
  <img src="icon.png" alt="Icon">
  <div class="icon-description">Icon Description</div>
</div>

然后，在CSS中设置容器元素和div的样式，如下所示：

.icon-container {
  position: relative;
}

.icon-description {
  display: none;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.icon-container:hover .icon-description {
  display: block;
}

解释一下上述CSS代码：

- .icon-container的position属性设置为relative，这样.icon-description的position属性会相对于.icon-container进行定位。
- .icon-description的display属性设置为none，这样在鼠标没有悬浮在图标上时，div不会显示出来。
- 当鼠标悬浮在.icon-container上时，.icon-description的display属性设置为block，这样div就会显示出来。
- .icon-description的bottom属性设置为-30px，这样div会出现在图标的下方，可以根据需要进行调整。
- .icon-description的left属性设置为50%，这样div会水平居中。
- .icon-description的transform属性设置为translateX(-50%)，这样div会在水平方向上向左偏移自身宽度的一半，从而实现水平居中。

通过这样的方式，当鼠标悬浮在图标上时，下方的div就会显示出来。