如何实现导航项箭头在hover及子菜单hover时切换为向上状态？

完全不需要JS，纯CSS就能搞定这个需求。核心思路是利用父元素:hover的特性——当鼠标悬停在.nav-item或它的任何子元素（包括子菜单）上时，.nav-item的:hover状态会持续生效，以此来控制箭头的显示状态。

给你两种可行方案：

方案一：CSS旋转箭头（无需修改原有HTML） #

直接通过旋转fa-chevron-down图标来模拟fa-chevron-up的效果，还能加上平滑过渡动画：

nav {
  display: flex;
}

.nav-item {
  display: flex;
  position: relative;
  padding: 10px;
  cursor: pointer; /* 提示可交互 */
}

.nav-submenu {
  position: absolute;
  background: lightgrey;
  top: 40px;
  display: none;
}

/* 悬停时显示子菜单 */
.nav-item:hover .nav-submenu {
  display: block;
}

/* 箭头添加过渡动画 */
.fa-chevron-down {
  transition: transform 0.2s ease;
  margin-left: 6px;
}

/* 父元素悬停时旋转箭头 */
.nav-item:hover .fa-chevron-down {
  transform: rotate(180deg);
}

方案二：切换图标显示（使用指定的chevron-up类） #

如果必须用fa-chevron-up类来显示向上箭头，只需在HTML里同时放两个箭头图标，用CSS控制hover时的显示切换：

修改后的HTML（单个菜单项示例）： #

<div class="nav-item">
  <div class="nav-text">
    Test
  </div>
  <span class="fa fa-chevron-down arrow-default"></span>
  <span class="fa fa-chevron-up arrow-hover"></span>

  <div class="nav-submenu">
    <ul>
      <li>Sub menu item</li>
    </ul>
  </div>
</div>

对应的CSS： #

nav {
  display: flex;
}

.nav-item {
  display: flex;
  position: relative;
  padding: 10px;
  cursor: pointer;
}

.nav-submenu {
  position: absolute;
  background: lightgrey;
  top: 40px;
  display: none;
}

.nav-item:hover .nav-submenu {
  display: block;
}

/* 默认隐藏向上箭头 */
.arrow-hover {
  display: none;
  margin-left: 6px;
}

/* 默认显示向下箭头 */
.arrow-default {
  margin-left: 6px;
}

/* 悬停时切换箭头显示 */
.nav-item:hover .arrow-default {
  display: none;
}
.nav-item:hover .arrow-hover {
  display: inline-block;
}

两种方案都能实现：鼠标悬停菜单项时箭头变向上，移到子菜单时箭头保持向上，直到鼠标离开整个.nav-item区域。

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