悬停时，如何更改标题导航栏链接中单个文本项的颜色和背景颜色？

Question

的HTML

<!-- start nav here -->
<nav>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our History</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li>
      <aa href="#">Contact Us</a>
    </li>
  </ul>
</nav>
<!-- end nav here -->

的CSS

  header nav li {
    background-color: #CECDC0;
    font-size: 20px;
    font: Noteworthy;
    color: blue;
    float: left;
    margin: 10px;
    margin-top: -2px;
  }

  header nav {
    display: block;
    float: right;
    line-height: -30px;
  }

  header nav li a:hover {
    color: red;
  }

当我像上面的示例中那样添加悬停效果时，它将使导航栏中的所有文本都悬停。 我希望“关于我们”具有不同的悬停背景颜色和字体颜色。 如何编辑html或CSS？

Answer 1

您可以选择第一项（关于我们）：

header nav li:first-child a:hover {
 color: red;
}

Answer 2

您可以使用一个类来定位特定的列表项。

Jsfiddle 。

的HTML

<nav>
  <ul>
    <li class="target"><a href="#">About Us</a></li>
    <li><a href="#">Our History</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

的CSS

nav li {
  background-color: #CECDC0;
  font-size: 20px;
  font: Noteworthy;
  color: blue;
  float: left;
  margin: 10px;
  margin-top: -2px;
}

nav {
  display: block;
  float: right;
  line-height: -30px;
}

nav li a:hover {
  color: red;
}

.target a:hover {
  color: #fff;
  background-color: gold;
}

Answer 3

我不确定您到底想要什么，但是以下是我的解释。

https://jsfiddle.net/Vuice/1dodL81o/

的HTML

<header>
  <!-- start nav here -->
  <nav>
    <ul>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Our History</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  <!-- end nav here -->
</header>

的CSS

header nav li {
  background-color: #CECDC0;
  font-size: 20px;
  font: Noteworthy;
  color: blue;
  float: left;
  margin: 10px;
  margin-top: -2px;
}
header nav {
  display: block;
  float: right;
  line-height: -30px;
}
header nav li a:hover {
  color: red;
}
header nav li:first-child a:hover {
  color: yellow;
  background-color: green;
}

Answer 4

这一点比较干净，因为父元素应该早于子元素。

 nav { display: block; } nav li{ display: inline-block; float: left; margin: 10px; margin-top: -2px; } nav li a{ background-color: #CECDC0; font-size: 20px; font: Noteworthy; color: blue; padding:5px 2px; line-height: 30px; text-decoration:none; } nav li:first-child a:hover { color: #fff; background-color: gold; } nav li a:hover { color: red; } 

 <nav> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Our History</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>