Html 创建一个导航栏，其中每个链接都有不同的悬停颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8716686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a navigation bar where each link has a different hover colour
提问by Matt Harris
I'd like to make a black navigation bar for my website, and when you hover over the first link it goes orange, the second link it goes green, etc. I know how to change colour on hover but don't know how to make each link different.
我想为我的网站制作一个黑色导航栏，当您将鼠标悬停在第一个链接上时，它会变为橙色，第二个链接会变为绿色，等等。我知道如何在悬停时更改颜色，但不知道如何更改使每个链接都不同。
I figure its something to do with giving ids to each li tag?
我认为这与为每个 li 标签提供 id 有关？
<div id="navbar">
<ul>
<li id="link1"><a href="1.html">1</a></li>
<li id="link2"><a href="2.html">2</a></li>
<li id="link3"><a href="3.html">3</a></li>
</ul>
</div>
But then how do I create different styles for each of these ids in the css file? Below is what I tried
但是，如何为 css 文件中的每个 id 创建不同的样式？以下是我尝试过的
#navbar ul li a {
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 30px;
padding-right: 30px;
color: #ffffff;
background-color: #000000;
}
#navbar ul li #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul li #link2 a:hover {
color: #ffffff;
background-color: #28C622;
padding-top:15px;
padding-bottom:15px;
}
Help much appreciated!
非常感谢帮助！
回答by Nate B
What you're doing is on the right track, but don't repeat the CSS over and over:
你正在做的是在正确的轨道上，但不要一遍又一遍地重复 CSS：
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul #link1 a:hover {
background-color: #C62222;
}
#navbar ul #link2 a:hover {
background-color: #28C622;
}
As others have noted, you also need to either remove the space between the liand your id, or just remove the lientirely (since there is only one link1, you don't necessarily need to tell the browser that it is an li).
正如其他人所指出的，您还需要删除li和 id之间的空格，或者完全删除 id li（因为只有一个link1，所以您不一定需要告诉浏览器它是li）。
Additionally, if you want, you can (and probably should) simply those selectors all the way down to #link1 a:hoverand #link2 a:hover. It's more of a stylistic choice, but it helps to keep your code clean.
此外，如果您愿意，您可以（并且可能应该）简单地将这些选择器一直到#link1 a:hover和#link2 a:hover。它更像是一种风格选择，但有助于保持代码整洁。
回答by Mathletics
You have a bad selector. The liis superfluous.
你有一个糟糕的选择器。该li是多余的。
#navbar #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
回答by ptriek
You need to remove the space between liand #link1:
您需要删除之间的空间li和#link1：
#navbar ul li#link1 a:hover
You could further optimize your CSS like this:
您可以像这样进一步优化您的 CSS：
#navbar a {
text-decoration: none;
padding: 25px 30px; /* shortcode for top/bottom - left/right */
color: #ffffff;
background-color: #000000;
}
#navbar a:hover { /* common hover styles */
color: #ffffff;
padding:15px 30px;
}
#link1 a:hover { /* individual hover styles */
background-color: #C62222;
}
#link2 a:hover { /* individual hover styles */
background-color: #28C622;
}
回答by idrumgood
remove the space between liand #link2.
删除之间的空间li和#link2。
#navbar ul li#link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul li#link2 a:hover {
color: #ffffff;
background-color: #28C622;
padding-top:15px;
padding-bottom:15px;
}
回答by George Cummins
You were close, but the space between liand #linkXis causing problems. These are not two separate elements, so they should be combined. One possible method is:
你是接近，但之间的空间li，并#linkX导致问题。这些不是两个单独的元素，因此应该将它们组合起来。一种可能的方法是：
#navbar ul li#link1 a:hover {
....
Alternately, you can use:
或者，您可以使用：
#navbar ul #link1 a:hover {
....
You may wish to combine the duplicated styles into a single directive:
您可能希望将重复的样式合并为一个指令：
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
Then use only the changed style as needed:
然后根据需要仅使用更改后的样式：
#link1 a:hover {
background-color: #C62222;
}
