[英]Overwrite mdboostrap dropdown items on hover colors
I have an Angular MDBoostrap nav bar that I styled using SCSS. 我有一个使用SCSS设置样式的Angular MDBoostrap导航栏。 When I added a dropdown tab I noticed that the font color and background color both change to white 'on-hover' like this .
当我添加一个下拉选项卡时,我注意到字体颜色和背景颜色都变为白色的“ on-hover”,就像这样 。
<!-- 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 -->
I have tried creating a custom scss style to overwrite the bootstrap style: 我尝试创建自定义的scss样式来覆盖引导程序样式:
.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;
}
I have also tried everything suggested here . 我也尝试了这里建议的一切。 Does anyone know where or how to locate this bootstrap style because I can't inspect the 'on-hover' effect to find where it is coming from.
有谁知道该引导样式的位置或位置,因为我无法检查“悬停”效果来查找其来源。
To overwrite the bootstap nav dropdown item on hover color, just change the "skin-accent" to what ever color you prefer. 要覆盖悬停颜色上的引导导航下拉菜单项,只需将“肤色”更改为您喜欢的颜色即可。
Reference this for help creating custom skins: mdbootstrap.com 参考此内容以帮助创建自定义皮肤: mdbootstrap.com
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.