创建导航栏，其中每个链接都有不同的悬停颜色 [英] Creating a navigation bar where each link has a different hover colour

问题描述

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

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

非常感谢！

<$ p

您正在做的是正确的路线，但不要重复这些CSS： $ p> #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 。它更多的是一个风格的选择，但它有助于保持你的代码干净。

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?

<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

#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!

解决方案

What you're doing is on the right track, but don't repeat the CSS over and over:

#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 li and your id, or just remove the li entirely (since there is only one link1, you don't necessarily need to tell the browser that it is an li).

Additionally, if you want, you can (and probably should) simply those selectors all the way down to #link1 a:hover and #link2 a:hover. It's more of a stylistic choice, but it helps to keep your code clean.

这篇关于创建导航栏，其中每个链接都有不同的悬停颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！