如何在hover下拉列表时将Font Awesome向下箭头切换为向上箭头

解决方案 #

你只需要调整箭头切换逻辑的触发选择器即可：
你当前的箭头切换仅绑定了.btn自身的hover状态，而按钮和下拉列表同属.drop-down-menu的子元素，只要将触发条件绑定到共同父容器的hover状态，就能实现hover下拉列表时箭头保持向上的效果。

修改后的CSS代码 #

将你原有CSS中箭头切换的两段规则替换为以下内容：

/* 父容器悬浮时，隐藏向下箭头 */
.drop-down-menu:hover .btn span {
  display: none;
}

/* 父容器悬浮时，显示向上箭头 */
.drop-down-menu:hover .btn::after {
  content: "\f106";
  font-family: "FontAwesome" !important;
}

逻辑说明 #

你原本的下拉列表展开逻辑就是绑定的.drop-down-menu:hover，修改后箭头切换逻辑和下拉列表展开逻辑完全对齐：只要鼠标停在父容器任意区域（包含按钮、下拉列表），就会同时触发展开下拉列表、切换为向上箭头的效果，完全符合需求。

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