如何在Angular的Bootstrap下拉菜单悬停时切换CSS图标

方法1：通过CSS伪元素直接修改图标内容 #

Bootstrap Icons通过::before伪元素的content属性渲染图标，我们可以利用下拉菜单的hover状态，直接覆盖目标图标的content值：

/* 保留你原有的下拉菜单显示样式 */
.dropdown:hover .dropdown-menu{
    display: block;
}
.dropdown-menu{
    margin-top: 0;
}

/* 新增图标切换样式 */
.dropdown:hover .bi-chevron-right::before {
  content: "\f356"; /* chevron-down的图标编码 */
}

不需要修改HTML结构，添加这段CSS后，鼠标悬停时图标会自动从chevron-right切换为chevron-down。

方法2：通过切换图标元素的显示状态 #

如果觉得伪元素修改不够直观，可以添加两个图标元素，通过hover控制它们的显示/隐藏：

修改后的HTML #

<div class="col-md-3">
    <div class="nav-item dropdown">
        <a href="#" data-toggle="dropdown">A-E
            <i style="float: right;" class="bi bi-chevron-right"></i>
            <i style="float: right; display: none;" class="bi bi-chevron-down"></i>
        </a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Inbox</a>
            <a href="#" class="dropdown-item">Sent</a>
        </div>
    </div>
</div>

对应的CSS #

/* 保留你原有的下拉菜单显示样式 */
.dropdown:hover .dropdown-menu{
    display: block;
}
.dropdown-menu{
    margin-top: 0;
}

/* 新增图标切换样式 */
.dropdown:hover .bi-chevron-right {
    display: none;
}
.dropdown:hover .bi-chevron-down {
    display: block;
}

你之前的CSS失效原因 #

• 选择器层级错误：.changeIcon2:hover i::before没有关联到下拉菜单的hover状态，应该以.dropdown:hover作为父选择器定位图标
• content属性仅对伪元素（::before/::after）生效，直接给.changeIcon设置content无效
• 图标编码的引号使用不规范，虽然不影响功能，但统一用单引号或双引号更易维护

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