在盤旋時更改文本顏色

我想要在盤旋<li>元素時更改鏈接的文本顏色。現在我有在盤旋時更改文本顏色

#nav li a:hover { 
    margin-left: -10px; 
    padding-left: 10px; 
    background-color: #13118C; 
    color: white; 
    font-weight: bold; 
    width: 100%; 
} 

#nav ul li:hover { 
    margin-left: -10px; 
    padding-left: 10px; 
    background-color: #13118C; 
    color: white; 
    font-weight: bold; 
    width: 100%; 
}

但是，這隻會改變文本顏色，當鏈接本身是懸停結束。如果鼠標稍微靠近鏈接的右側，背景會改變，但文字不會。我喜歡它，以便鼠標在鏈接的右側在功能上與鏈接本身相同。有沒有辦法讓文字顏色在背景變化時變化？

來源

2013-06-25 Daniel Rosenthal

我相信你的問題已經[在這裏找到答案（http://stackoverflow.com/questions/13233878/make-hover-on-liitem-li-change- text-color-too-css-trick？rq = 1「這裏回答了這個問題。」） – dayid

然後確保無論是a繼承其顏色從其父：

li:hover a { 
    color: inherit; 
}

或指定選擇相同的顏色明確適用於a元素：

#nav ul li:hover, 
#nav ul li:hover a { 
    margin-left: -10px; 
    padding-left: 10px; 
    background-color: #13118C; 
    color: white; 
    font-weight: bold; 
    width: 100%; 
}

你可以的當然，也可以使用a填充li元素，使用：

#nav ul li a { 
    display: block; 
}

如果指定li的高度，然後使用相同的高度（與以前display: block規則）的a將li內垂直居中爲好，例如：

#nav ul li { 
    height: 2em; /* or whatever, adjust to taste... */ 
} 
#nav ul li a { 
    display: block; 
    line-height: 2em; 
}

雖然paddingli將不會包含在指定的高度（它將是元素的高度，加上填充加上邊框寬度），所以a周圍會有一個空白區域，除非您指定（對於符合標準的瀏覽器）box-sizing: border-box;包括border和padding指定高度。

來源

2013-06-25 18:47:11

演示'display：block'方法：http://jsfiddle.net/N2xGv/1/ – showdev

哇。很好用CSS我不知道（我是一個總noob）。 –

嗯，我希望我能幫上忙！別擔心，我們都開始在某個地方學習。我們大多數人，包括我在內，都還*學習... =） –

簡單！

#nav li a { 
    color: white; 
} 

/* When hovering over li, apply styles to child a */ 
#nav li:hover a { 
    color: blue; 
}

來源

2013-06-25 18:48:26 Nix

嘗試這樣的事情

#nav li a 
{ 
    margin-left: -10px; 
    padding-left: 10px; 
    background-color: #13118C; 
    color: white; 
    font-weight: bold; 
    width: 100%; 

}

應用樣式孩子

#nav li:hover a 
{ 
margin-left: -10px; 
padding-left: 10px; 
background-color: #13118C; 
font-weight: bold; 
width: 100%; 
color: blue; 
}

來源

2013-06-25 19:06:52

有很多的上述很好的建議，但我想提一提，爲什麼你的CSS規則做的原因不工作，這是因爲特殊性。您定義的每個CSS選擇器都具有計算的特異性，您可以在此處閱讀這些特性。 http://www.w3.org/TR/css3-selectors/#specificity。這些值用於確定哪些規則優先於其他規則。

請注意，繼承選擇器的特異性爲0，這對您的情況非常重要。

#nav ul li { color: #000; } 
#nav ul li a { color: #800; }  // This has a specificity of 103 when applied to <A> elements 
#nav ul li:hover { color: #080; } // This has a specificity of 0 when applied to <A> elements because it is inherited from the parent <LI> element.

實施例：http://jsfiddle.net/rg4fN/

通過附加一個a元件到最後選擇器，它將不再被當施加至元件繼承。它現在比其他選擇器具有更高的特異性，因此優先。

#nav ul li a { color: #800; }  // This has a specificity of 103 when applied to <A> elements 
#nav ul li:hover a { color: #080; } // This has a specificity of 113 when applied to <A> elements

例子：http://jsfiddle.net/NxT29/

來源

2013-06-25 20:20:19

在盤旋時更改文本顏色

回答

相關問題