更改活动导航项的颜色 [英] Changing the color of active nav-item
问题描述
我在Bootstrap中设计了一个 navbar
。当 nav-item
的类设置为 active
时,我试图使它变成不同的颜色。
I have a navbar
designed in Bootstrap. I am trying to make it a different color when the class of the nav-item
is set to active
.
但是我无法这样做。当我设置背景
时,背景颜色正在改变,但是当我使用 color
时,颜色不会改变。请注意,我正在使用Bootstrap v4。
However I am not able to do so. When I set the background
the background color is changing, but when I use color
the color is not changing. Note that I'm using Bootstrap v4.
$(document).ready(function() {
"use strict";
$('ul.navbar-nav > li').click(function(e) {
e.preventDefault();
$('ul.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
});
.navbar-toggler:focus {
outline: 0;
}
.navbar-nav > .active {
color: aqua!important; **// THIS DOES NOT WORK**
background-color: chartreuse; **//THIS WORKS**
}
.nav-item > a:hover {
color: aqua!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="lines"></span><span class="lines"></span><span class="lines"></span>
</button>
<h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
<div class="collapse animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
推荐答案
问题是因为 .nav-item> a:悬停
比更具体.navbar-nav> 。主动
。要解决此问题,请删除!important
运算符(因为您应该不惜一切代价避免它)并使您想要覆盖的规则更具体。
The issue is because the .nav-item > a:hover
is more specific than .navbar-nav > .active
. To fix this, remove the !important
operator (as you should avoid it at all costs) and make the rule you want to override more specific.
.navbar-nav > .active > a {
color: aqua;
background-color: chartreuse;
}
.nav-item > a:hover {
color: aqua;
}
$(document).ready(function() {
"use strict";
$('ul.navbar-nav > li').click(function(e) {
e.preventDefault();
$('ul.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
});
.navbar-nav > .active > a {
color: aqua;
background-color: chartreuse;
}
.nav-item > a:hover {
color: aqua;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
这篇关于更改活动导航项的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!