更改引導程序標題鏈接顏色上懸停

-2

我已盡全力解決這個簡單的問題，但我無法弄清楚爲什麼它不起作用。爲報頭的代碼是更改引導程序標題鏈接顏色上懸停

/*-- header --*/ 
.header{ 
    padding: 1em 0; 
    background: url(../images/header-bg.png) no-repeat 0px 0px; 
    background-size: 27% 100%; 
    margin-top:0px; 
} 
.logo{ 
    float:left; 
    margin-top:0.5em; 
} 
span.menu{ 
    display:none; 
} 
.top-nav{ 
    float:right; 
} 
.top-nav ul{ 
    margin:0; 
    padding:0; 
} 
.top-nav ul li{ 
    display:inline-block; 
} 
.top-nav ul li a{ 
    text-transform:uppercase; 
    font-weight:700; 
    color:#2C3E50; 
    margin:1em 1.3em; 
    display:inline-block; 
    text-decoration:none; 
} 
.top-nav ul li a:hover,.top-nav ul li.active a{ 
    color:#f22b2b; 
} 



<style> 
     #navtopbar { 
      background-color: #ffffff; 
     } 
     } 
</style> 

<div class="nav navbar-fixed-top" id="navtopbar"> 
    <div class="container-fluid"> 
        <div class="top-nav"> 
         <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <span class="menu"> </span> 
         <div class="navbar-collapse collapse"> 
          <ul> 
           <li id="linkcolor" class="active"><a href="~/index/index">Home</a></li> 
           <li id="linkcolor"><a href="~/Index/AboutUs">About</a></li> 
           <li><a href="~/Doctor/Index">Doctors</a></li> 
           <li><a href="~/Hospitals/Index">Hospitals</a></li> 
           <li><a href="~/Clinics/Index">Clinics</a></li> 
           <li><a href="~/Home/Contact">Contact</a></li> 

          </ul> 

         </div> 
        </div> 
       </div> 
</div>

它顯示上活性的顏色和懸停是默認藍色。我想把它改成紅色。在CSS是

.top-nav ul li a:hover,.top-nav ul li.active a{ 
    color:#f22b2b;

但它仍然顯示藍色。所以我嘗試通過內聯樣式來覆蓋css。

我都試過.nav > li > a {color: red}或.navbar-collapse > ul > li > a {color: red}或.nav > li {color:red}或.nav > li > a:hover{color:red;}或ul.nav a:hover, ul.nav a:focus, ul.nav a:active { color:red; } 沒有人會爲我工作。請建議我在哪裏做錯了？

PS：截屏還附上

來源

2017-05-20 Waleed Manzoor

這種藍色和你的截圖是不是標準的引導。 – makshh

@makshh好吧我的錯誤，我想要的，把這個藍色變成紅色。 –

你能提供一個JSFiddle嗎？ –

使用下面的層次

.navbar-default .navbar-nav>li>a:hover { 
    color:red; 
}

LIVE DEMO

來源

2017-05-20 21:13:32 Aravind

我很抱歉地說，但這個也不適合我。 –

他不使用.navbar-default或.navbar-nav ...所以這不起作用 – Gerard

你可以創建演示@RjSunny – Aravind

這應該工作

.navbar-collapse ul li a:hover, .navbar-collapse ul li a:active { color:red; }

來源

2017-05-20 21:19:15 Gerard

不存在同樣的問題。不是worling –

FIDDLE：https：//jsfiddle.net/beekvang/0tnofpyo/ – Gerard

你嘗試到t當你需要瞄準一個錨點的時候加強李。

看看這裏的例子：

.navbar-default .nav > li > a:hover, 
.navbar-default .nav > li > a:focus, 
.navbar-default .nav > li > a.active { 
    color: #fe0000; 
}

如果改變以上，以滿足您的代碼，你會發現它會改變懸停顏色，專注和積極的爲您服務。

希望幫助

來源

2017-05-20 22:19:02 Mattn1014

更改引導程序標題鏈接顏色上懸停

回答

相關問題