創建導航欄，其中每個鏈接在懸停時具有不同的顏色

試圖在懸停時將導航欄中的單個鏈接更改爲不同的顏色。似乎無法弄清楚。創建導航欄，其中每個鏈接在懸停時具有不同的顏色

HTML：

<div class="collapse navbar-collapse navbar-right navbar-main-collapse"> 
    <ul class="nav navbar-nav"> 

<!-- Hidden li included to remove active class from about link when scrolled up past about section --> 
       <li class="hidden"> 
        <a href="#HOME"></a> 
       </li> 
       <li class="page-scroll"> 
        <a href="#link1">1</a> 
       </li> 
       <li class="page-scroll"> 
        <a href="#link2">2</a> 
       </li> 
       <li class="page-scroll"> 
        <a href="#link3">3</a> 
       </li> 
       <li class="page-scroll"> 
        <a href="#link4">4</a> 
       </li> 
      </ul> 
     </div>

CSS：

.navbar-custom li a:hover, 
.navbar-custom .nav li a:focus, 
.navbar-custom .nav li.active 
{ 
outline: 0; 
background-color: #bdc3c7 !important; 
color: #fff; 
}

已設置爲紅色當前的鏈接。但是希望每個單獨的鏈接具有不同的顏色。例如。 Link1 =紅色，Link2 =藍色。

我遇到了麻煩！幫助讚賞！

謝謝！

來源

2014-02-16 luke

請參閱：http://stackoverflow.com/questions/8716686/creating-a-navigation-bar-where-each-link-has-a-different-hover-colour – Jatin

如果使用SASS，它可以在一個更清潔的方式來完成這樣在你的SCSS文件：

$colors: (1: red, 2: blue, 3: yellow, 4: black); 

@each $anchor, $color in $colors { 
    #{".navbar-custom .nav li:nth-child("+ (1 + $anchor) + ") a:hover"} { 
     background-color: $color; 
    } 
}

將生成CSS：

.navbar-custom .nav li:nth-child(2) a:hover { 
    background-color: red; 
} 

.navbar-custom .nav li:nth-child(3) a:hover { 
    background-color: blue; 
} 

.navbar-custom .nav li:nth-child(4) a:hover { 
    background-color: yellow; 
} 

.navbar-custom .nav li:nth-child(5) a:hover { 
    background-color: black; 
}

現在您可以爲您的所有鏈接添加多達不同的顏色，並讓SASS爲您生成CSS。

來源

2014-02-17 00:03:10 JustinHo

真棒。剛剛添加到我的scss並調整顏色和BOOM。謝啦。 – luke

偉大的解決方案@JetLaggy –

呀，只需要class起來唯一

HTML

 <li class="hidden colour1"> 
      <a href="#HOME"></a> 
     </li> 
     <li class="page-scroll colour2"> 
      <a href="#link1">1</a> 
     </li> 
     <li class="page-scroll colour3"> 
      <a href="#link2">2</a> 
     </li>

CSS：

.colour1:hover { background-color:blue; } 
.colour2:hover { background-color:red; } 
.colour3:hover { background-color:green; }

來源

2014-02-16 23:13:27

你會需要分配他們的CSS爲每個類給不同的鏈接不同的類

喜歡

.pagescroll1{ 

} 
.pagescroll2{ 

}

，並從你的HTML

來源

2014-02-16 23:14:03 user3311898

優雅的解決方案是通過屬性值來選擇給他們打電話。第一個示例：

a[href="#link1"]:hover, 
a[href="#link1"]:active, 
{ 
    outline: 0; 
    background-color: #bdc3c7 !important; 
    color: #fff; 
}

但是，只有當您直接選擇a元素時纔有效。使用第三個選擇器li.active，該元素中沒有關於它鏈接的信息。在這種情況下，你必須按照rob的建議添加類。

來源

2014-02-16 23:21:46 Tobl

創建導航欄，其中每個鏈接在懸停時具有不同的顏色

回答

相關問題