NavBar鼠標懸停和當前效果

所以我想要發生的是當前鏈接的背景（您當前所在頁面的鏈接）將單獨的顏色以及字體顏色更改爲白色。我也希望在a：hover（對於懸停的鏈接）上發生同樣的效果。我已經非常接近這種效果，但是我的一個問題是要更改a：的字體顏色，請將鼠標懸停在鏈接上，而不是簡單地放在其容器中。我明白爲什麼這不起作用，因爲即時將該屬性鏈接到鏈接而不是列表，但如果我將它們放在#nav li中，「a」的字體顏色將不起作用。我想要的效果類似於此頁面上的設NavBar的http://www.vitalsmarts.com/ CSS/HTML：NavBar鼠標懸停和當前效果

<style> 

#nav{ 
    list-style-type:none; 
    text-align:center; 
    height:50px; 
    background-image:url("image/menuBg.png"); 
} 

#nav li { 
    float:left; 
    width:155px;  
} 


#nav li a { 
    text-decoration:none; 
    font-size:1.3em; 
    color:#000000; 
} 

#nav li:hover { 
    background-color:#143D17; 
    color:#FFFFFF; 
} 

#nav li a:hover { 
     color:#FFFFFF; 
} 

#nav li a.currentFont { 
    color:#FFFFFF; 
} 

.navPadS { 
    padding:13px 0px; 
} 

.navPadL { 
    padding:13px 12px; 
} 

.navPadLL { 
    padding-top:13px; 
    padding-bottom:13px; 
    padding-right:20px; 
} 

.current { 
    background-color:#143D17; 
} 

</style> 


<body> 

<!Header and NavBar> 

<div id="navCont"> 
     <ul id="nav" class"tbBord"> 
      <li class="navPadS"><a class="currentFont" href="index.html">home</a></li> 
      <li class="navPadLL"><a href="index.html">home</a></li> 
      <li class="navPadL"><a href="#">home</a></li> 
      <li class="navPadS"><a href="#">home</a></li> 
      <li class="navPadS"><a href="#">home</a></li> 
      <li class="navPadS"><a href="#">home</a></li> 
     </ul> 
    </div> 

</body> 
</html>

來源

2013-07-03 user2395474

不要樣式李只是把它們飄浮左並把你所有的風格放在a中。我創建了this example on JS Bin，但重要的是：

#nav li { 
    margin:0; 
    padding:0; 
    float:left; 
} 
#nav li a { 
    text-decoration:none; 
    font-size:1.3em; 
    color:#000000; 
    width:155px; 
    display:block; 
    padding:10px; 
} 
#nav li a:hover, #nav li a.currentFont { 
    background-color:#143D17; 
    color:#FFFFFF; 
}

來源

2013-07-03 20:33:30 Moob

非常好，謝謝 – user2395474

添加到您的CSS

#nav li a { 
    text-decoration:none; 
    font-size:1.3em; 
    color:#000000; 
    display:block; 
}

來源

2013-07-03 20:17:16

啊我試過了，它沒有工作，但既然你建議我玩了一下它。我將需要使用鏈接選擇器而不是基本類來將填充類更改爲頁邊距（#nav li a.padding）謝謝 – user2395474

NavBar鼠標懸停和當前效果

回答

相關問題