我是CSS新手，我正试图弄清楚如何在悬停时更改文本颜色。 我已经尝试了我在网上找到的东西，但它仍然不能工作，当悬停时，文本仍然是黑色的 下面是我的HTML代码:

我还想知道为什么当我被悬停到时，我不能覆盖整个导航，就像你在下面的截图中看到的那样

当导航栏悬停到以下位置时，是否还有一种方法可以覆盖或更改导航栏的整个背景色？

---

顺晟科技：

您需要分别针对您的锚并且有两个悬停声明。添加以下内容（除了列表项的CSS之外）:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
}

使用下面的css更改悬停的颜色:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
}

您指向错误的选择器。您的is选择器是。所以您应该这样放置CSS。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
}

您应该像这样为孩子添加样式

如果您不想在css中添加新的行，并且可以使用您的代码，您将从其父元素继承颜色

请尝试这个

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
}