如何实现导航栏图标鼠标悬停时展开显示对应功能描述的效果？

问题原因 #

你现有代码存在逻辑错误：默认设置为display: none的元素本身无法响应鼠标hover事件，你把hover触发规则绑定在了默认隐藏的提示元素内部的a标签上，自然永远无法触发显示逻辑。

调整步骤 #

1. 调整HTML结构 #

每个导航项采用「父容器包裹图标+提示文本」的结构，示例如下：

<div class="nav-item">
  <!-- 导航图标 -->
  <a href="你的跳转地址">
    <img src="你的图标地址" alt="Facebook">
  </a>
  <!-- 对应的提示文本 -->
  <span class="tip">Facebook Page</span>
</div>

<!-- 其余导航项复用相同结构，只修改图标和提示文本内容即可 -->
<div class="nav-item">
  <a href="你的跳转地址">
    <img src="图书图标地址" alt="图书">
  </a>
  <span class="tip">图书功能</span>
</div>

2. 替换现有CSS代码 #

用通用规则替代重复的单元素规则，减少冗余代码，同时调整hover触发逻辑：

/* 导航项父容器设置相对定位，用来定位提示文本的位置 */
.nav-item {
  position: relative;
  cursor: pointer;
}

/* 所有提示文本默认隐藏，统一设置样式 */
.tip {
  display: none;
  /* 以下是样式优化，可根据你的设计需求调整 */
  position: absolute;
  /* 调整数值控制提示和图标的相对位置 */
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #222;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}
/* 提示框加小三角优化视觉效果，不需要可以删掉这段 */
.tip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #222;
}

/* 鼠标悬停在可见的导航项容器上时，显示内部的提示文本 */
.nav-item:hover .tip {
  display: block;
}

效果说明 #

调整后只要鼠标悬停在任意导航图标上，父容器的hover状态就会触发，自动显示对应提示文本，鼠标移出后提示自动隐藏，不需要为每个图标单独写重复的CSS规则，后续新增导航项也只要复用相同结构即可直接生效。

内容的提问来源于stack exchange，提问作者iChiwi