試圖讓懸停在按鈕上的導航文本更改顏色，而不僅僅是文本

Question

我做了每邊填充和背景顏色的導航。我在文字上有一個默認顏色，並且讓背景在徘徊時變成另一種顏色。問題是我想讓文字在背景懸停時改變顏色，而不是文字，因爲我需要使用與背景顏色默認文字相同的顏色[當徘徊時]現在如果我徘徊，那麼它將基本上因爲背景和文字將是相同的顏色，所以是不可見的文字。即使在文本之外懸停空格而不是文本排版時，我也希望文本顏色發生變化。

的jsfiddle - http://jsfiddle.net/ucsk99cL/

<aside class="sidebar"> 
    <nav> 
     <ul> 
      <li style=""><a href="">home</a></li> 
      <li><a href="">about us</a></li> 
      <li><a href="">orders</a></li> 
      <li><a href="">gallery</a></li> 
      <li><a href="">contact</a></li> 
     </ul> 
    </nav> 
</aside> 




.sidebar{ 
float:left; 
margin:20px; 
margin-right:150px; 
} 

nav ul li a{ 
text-decoration:none; 
font-family:myriad pro; 
font-size:20px; 
color:#3d2316; 
} 


nav ul li{ 
padding-top:26px; 
padding-bottom:26px; 
padding-left:57px; 
padding-right:57px; 
margin-bottom:3px; 
background-color: #CBAFA2; 
} 

nav ul li:hover{ 
background-color: #3D2316; 
} 

Answer 1

懸停在父時只需改變顏色，li元素：

Updated Example

nav ul li:hover a { 
    color: #fff; 
} 

如果你希望能夠點擊任何地方內li，你將不得不添加填充到錨元素，而不是li元素。只需將display更改爲inline-block，以便它能夠遵守填充。我還做了其他一些更改，請參閱example。

nav ul li a { 
    padding:26px 58px; 
    display:inline-block; 
} 

Answer 2

試試這個

<aside class="sidebar"> 
<nav> 
    <ul> 

     <li id="test"><a href="">home</a></li> 
     <li id="test"><a href="">about us</a></li> 
     <li id="test"><a href="">orders</a></li> 
     <li id="test"><a href="">gallery</a></li> 
     <li id="test"><a href="">contact</a></li> 
    </ul> 
</nav> 

添加下面的CSS代碼;

#test:hover a {color:red;}