第 1 步:定义一个名为的类,该类applycolor
可用于应用您选择的颜色。
第 2 步:定义当它悬停时会发生什么动作。如果您的表单背景是白色的,那么您必须确保在悬停时选项卡不会变成白色。要实现这一点,请使用该!important
子句在悬停属性上强制执行此功能。我们这样做是为了覆盖 Bootstrap 的默认行为。
第 3 步:将类应用于您要定位的选项卡。
CSS部分:
<style>
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
color: #fff;
background-color: #337ab7 !important;
}
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: none !important;
}
.applycolor {
background-color: #efefef;
text-decoration: none;
color: #fff;
}
.applycolor:hover {
background-color: #337ab7;
text-decoration: none;
color: #fff;
}
</style>
标签部分:
<section class="form-toolbar row">
<div class="form-title col-sm-12" id="tabs">
<ul class="nav nav-pills nav-justified">
<li class="applycolor"><a data-toggle="pill" href="#instance" style="font-size: 1.8rem; font-weight: 800;">My Apps</a></li>
<li class="active applycolor"><a data-toggle="pill" href="#application" style="font-size: 1.8rem; font-weight: 800;">Apps Collection</a></li>
</ul>
</div>
</section>