Question

我想为我的网站制作一个黑色导航栏，当你将鼠标悬停在第一个链接上时，它会变为橙色，第二个链接变为绿色，等等。我知道如何在悬停时更改颜色但不要知道如何使每个链接不同。

我认为它与为每个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>

但是，如何在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;
}

非常感谢！

Answer 1

你正在做的是在正确的轨道上，但不要一遍又一遍地重复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; 
}

正如其他人所说，你还需要删除li和你的ID之间的空格，或者只是完全移除li（因为只有一个link1，你不一定需要告诉浏览器它是li）。

此外，如果您愿意，您可以（也可能应该）将这些选择器一直放到#link1 a:hover和#link2 a:hover。它更像是一种风格选择，但它有助于保持代码清洁。

Answer 2

您需要删除li和#link1之间的空格：

#navbar ul li#link1 a:hover

您可以像这样进一步优化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; 
}

Answer 3

删除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;
}

Answer 4

你很近，但是li和#linkX之间的空格造成了问题。这些不是两个独立的元素，因此它们应该结合起来。一种可能的方法是：

#navbar ul li#link1 a:hover {
    ....

或者，您可以使用：

#navbar ul #link1 a:hover {
    ....

您可能希望将重复的样式合并到一个指令中：

#navbar ul li a:hover {
    color: #ffffff; 
    padding-top:15px;
    padding-bottom:15px;
}

然后根据需要仅使用更改的样式：

#link1 a:hover {
    background-color: #C62222;
}

创建导航栏，其中每个链接具有不同的悬停颜色

4 个答案: