有什么方法可以在鼠标悬停时更改Bootstrap CSS图标吗

fcg9iug3 于 2023-02-01 发布在 Bootstrap

关注(0)|答案(1)|浏览(142)

我有一个引导下拉在Angular 。下拉菜单我使用引导css chevron-right图标。当用户鼠标悬停，我想改变它的chevron-down图标。
这是我的密码

<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";
  }

这是我的UI，当用户鼠标悬停时，下拉菜单显示，但同时我无法更改右侧图标

我该怎么做呢？

css

来源：https://stackoverflow.com/questions/75094877/is-there-any-way-to-change-bootstrap-css-icon-on-mouse-hover

1条答案

按热度按时间

f87krz0w1#

我有不同的解决方案给你。这里我已经尝试给你。

<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;
}

如果你想旋转图标的下拉悬停然后取代以上css与此之一。

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

希望你喜欢：）

赞(0）回复(0）举报 2023-02-01

我来回答

有什么方法可以在鼠标悬停时更改Bootstrap CSS图标吗

1条答案

相关问题

热门标签

最新问答