html - 改变背景颜色悬停在不同的li a

Question

我的导航栏工作得很好，但我需要在每个元素的背景中使用不同的颜色。我试着给他们 ID 并在 CSS 中使用它，但它不起作用。“info day”应该是耐火砖(红色)，但是“course”和“locations”应该是两种不同的颜色。谁能帮帮我？

.menuUl {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-left: none;
  border-right: none;
}
.menuLi {
  float: left;
  border: none;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: firebrick;
  border-radius: 5px;
}

<ul class="menuUl">
  <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a>
  </li>
  <li class="menuLi" id="infoDay"><a href="">INFO DAY</a>
  </li>
  <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a>
  </li>
</ul>

Answer 1

希望这对您有帮助:

.menuUl{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-left: none;
    border-right: none;
}
.menuLi{
    float: left;
    border: none;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li:nth-child(1) a:hover {
    background-color: blue;
    border-radius: 5px;
}
li:nth-child(2) a:hover {
    background-color: firebrick;
    border-radius: 5px;
}
li:nth-child(3) a:hover {
    background-color: black;
    border-radius: 5px;
}

<ul class="menuUl">
    <li class="menuLi" id="courses"><a class="active" href="EindOpdracht.html">COURSES</a></li>
    <li class="menuLi" id="infoDay"><a href="">INFO DAY</a></li>
    <li class="menuLi" id="locations"><a href="Location.html">LOCATIONS</a></li>
</ul>