有没有办法改变鼠标 hover 上的 Bootstrap CSS 图标

Question

我在 Angular 中有一个 Bootstrap 下拉菜单。对于下拉菜单，我使用的是 bootstrap css人字形右图标。 当用户鼠标 hover 时，我想将其更改为人字形向下图标。

这是我的代码

<style>
    .dropdown:hover .dropdown-menu{
        display: block;
    }
    .dropdown-menu{
        margin-top: 0;
    }
</style>

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

我尝试了这些 css 类，但它不起作用

  .changeIcon{
    content: '\F285';
   }

   .changeIcon2:hover i::before{
    content: "\uF356";
  }

这是我的用户界面，当用户鼠标 hover 时，会出现下拉菜单，但随之而来的是我无法更改右侧图标

我怎样才能做到这一点？

Answer 1

我为您提供了不同的解决方案。这是我为您尝试的。

 <div class="dropdown">
    <button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        A-E
        <i class="bi bi-chevron-right icon"></i>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div> 

向其申请以下css

.btn.show .icon::before {
   transform: rotate(90deg);
   transition: transform 0.5s;
}

如果您想旋转下拉菜单 hover 上的图标，请将上面的 css 替换为这个。

.dropdown:hover .icon::before {
  transform: rotate(90deg);
  transition: transform 0.5s;
}

希望你喜欢：）