主動式導航欄鏈接背景顏色默認爲

已經爲導航欄的活動li元素添加了自定義CSS。但他們似乎選擇了默認的黑色背景色。我想將其背景顏色更改爲＃428BCA。根據代碼，導航欄的其他元素正在改變它們的顏色。主動式導航欄鏈接背景顏色默認爲

我的CSS代碼如下：

carousel-inner > .item > img, .carousel-inner > .item > a > img { 
width: 100%; 
margin: auto; 
height: 850px; 
} 
body { 
position: relative; 
} 
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} 
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
.navbar { 
position:fixed; 
top:0; 
z-index:10; 
width:100%; 
background-color:black; 
opacity: 0.9; 
} 
#nav-right>.active{ 
background-image:none; 
background-color: #428BCA; 
color: white; 
} 
#nav-right>.active>li>a, #nav-right>.active>li>a:hover, #nav-right>.active>li>a :focus{ 
background-image:none; 
background-color: #428BCA; 
color: white; 
} 
#nav-right li a { 
color: #428BCA; 
} 
#nav-right li a:hover{ 
background-color: #428BCA; 
color: white; 
} 
#drop-menu > .active > a, #drop-menu > .active > a:hover, #drop-menu> .active > a:focus { 
background-image: linear-gradient(to bottom, #17AA76, #149466); 
background-repeat: repeat-x; 
color: #FFFFFF; 
} 
#drop-menu li a:hover { 
background-image:none; 
background-color:#16A170; 
} 
#drop-menu li a{ 
background-image:none; 
color: black; 
}

我張貼的小提琴正好說明我的問題：

https://jsfiddle.net/mukundm/d0Lhvc1z/24/

請幫助我。

來源

2016-12-05 Mukund Mittal

試試這個.navbar逆.navbar-NAV>。主動> A {背景：＃！428BCA重要} – Nandhu

我可以看到：＃428BCA作爲他們的背景..你能給出正確的快照嗎？ – Geeky

@Nandhu，我試過了，文本顏色在改變，但背景顏色沒有改變。我很抱歉，我不小心寫了顏色，而不是背景顏色....感謝您的方式:) –

你應該給的CSS代碼中的CSS背景屬性爲#nav-right > .active > a，而不是#nav--right > .active。這是因爲bootstrap不會將背景屬性應用於<li>元素，而是將其應用於<a>元素，而不是<li>元素。當鏈接激活時，活動類將添加到<li>元素。所以，你的CSS代碼應該如下：

carousel-inner > .item > img, .carousel-inner > .item > a > img { 
width: 100%; 
margin: auto; 
height: 850px; 
} 
body { 
position: relative; 
} 
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} 
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
.navbar { 
position:fixed; 
top:0; 
z-index:10; 
width:100%; 
background-color:black; 
opacity: 0.9; 
} 
/* Edited Style */ 
#nav-right>.active > a, #nav-right>.open>a{ 
background-image:none; 
background-color: #428BCA; 
color: white; 
} 
/* Edited style ends */ 
#nav-right>.active>li>a, #nav-right>.active>li>a:hover, #nav-right>.active>li>a :focus{ 
background-image:none; 
background-color: #428BCA; 
color: white; 
} 
#nav-right li a { 
color: #428BCA; 
} 
#nav-right li a:hover{ 
background-color: #428BCA; 
color: white; 
} 
#drop-menu > .active > a, #drop-menu > .active > a:hover, #drop-menu> .active > a:focus { 
background-image: linear-gradient(to bottom, #17AA76, #149466); 
background-repeat: repeat-x; 
color: #FFFFFF; 
} 
#drop-menu li a:hover { 
background-image:none; 
background-color:#16A170; 
} 
#drop-menu li a{ 
background-image:none; 
color: black; 
}

來源

2016-12-05 07:29:14

嗨Nishant！您的解決方案正在工作，但這也改變了我的活動下拉菜單鏈接的背景顏色。我爲這些下拉鍊接編寫的CSS代碼失敗。 –

您還必須設計'＃nav-right> .open> a'類的樣式。如果在導航鏈接中打開下拉菜單，則會添加打開的類。編輯答案，以便您可以對其進行測試。 –

沒有發生什麼變化...... –

更改您的引導風格

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .open > a{ 

    /* background-image: linear-gradient(to bottom, #080808 0px, #0f0f0f 100%); 
    background-repeat: repeat-x; 
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.25) inset; */ 
    color: #fff !important; 
    background: #428bca; 
}

來源

2016-12-05 07:18:37

嗨Anubhav！您的解決方案正在工作，但這也改變了我的活動下拉菜單鏈接的背景顏色。我爲這些下拉鍊接編寫的CSS代碼失敗。 –

請申請您的解決方案驗證碼

li.active a{ 
    background: #428BCA!important; 
    color:#fff!important; 
}

來源

2016-12-05 07:19:01

嗨Santosh！您的解決方案正在工作，但這也會一次更改我所有下拉菜單鏈接的背景顏色。我爲這些下拉鍊接編寫的CSS代碼失敗。 –

我甚至嘗試在下拉鍊接CSS中添加'！important'，但它不起作用。 –

將任何自定義類或ID放入ul .custom-class li.active a {code} –

避免important!這只是壞的CSS做法。而是補充一點：

#nav-right li.active a { 
    background: #428BCA; 
    color: white; }

PS：更多關於爲什麼不使用!important： What are the implications of using "!important" in CSS?

來源

2016-12-05 07:22:12 Underfrog

Hello Underfrog的CSS代碼。您的解決方案正在工作，但這也改變了我的活動下拉菜單鏈接的背景顏色。我爲這些下拉鍊接編寫的CSS代碼失敗。 –

主動式導航欄鏈接背景顏色默認爲

回答

相關問題