在悬停颜色上覆盖 mdboostrap 下拉项

Question

我有一个 Angular MDBoostrap 导航栏，我使用 SCSS 设置了样式。当我添加下拉选项卡时，我注意到字体颜色和背景颜色都变为白色 'on-hover'，如 this。

<!-- Links -->
<ul class="navbar-nav mr-auto custom-nav">
  <li class="nav-item">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['about']">About<span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item page-scroll">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['contact']">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link waves-light" mdbWavesEffect [routerLink]="['support']">Support</a>
  </li>
  <li class="nav-item dropdown btn-group" dropdown>
    <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect >Products </a>
    <div class="dropdown-menu dropdown-primary dropdown-menu-xl-right" role="menu">
      <a class="dropdown-item" [routerLink]="['products']">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
 </ul>
<!-- Links -->

我尝试创建自定义 scss 样式来覆盖 bootstrap 样式：

.custom-nav{
  color: #ffffff;
  font-size: larger;
  font-family: Impact;

  a {
    color: white;
    font-family: Calibri;
    font-size: 17px;
  }

  li {
    margin-left: 20px;
  }

}

.dropdown-item:hover{
  color: black;
}

我也尝试了所有建议 here。有谁知道在哪里或如何找到这个 bootstrap 样式，因为我无法检查 'on-hover' 效果以找到它的来源。

Answer 1

要在悬停颜色上覆盖引导导航下拉项，只需将 "skin-accent" 更改为您喜欢的任何颜色。

参考此内容以帮助创建自定义皮肤：mdbootstrap.com

在悬停颜色上覆盖 mdboostrap 下拉项

Overwrite mdboostrap dropdown items on hover colors

html

angular

sass

mdbootstrap