悬停时导航栏上的背景颜色更改问题

Question

我试图让我的导航栏的背景颜色随着鼠标悬停在它上面而改变。我能够这样做 CSS:

nav li a:hover {
  background-color:white;
  background-color: rgba(80, 80, 205, 0.3);
  text-decoration: none;
  color: black;
}

但是当我完成导航栏的样式化时，它出于某种原因停止了工作。任何想法为什么？ PS：我非常了解编码（1 周！）如果您对我的代码的任何部分提出任何反馈，我将不胜感激。

nav {
  width: 100%;
  overflow: hidden;
  margin: 0 0 0 0;
  background-color: rgb(80, 80, 205);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 15pt;
}

nav li {
  float: left;
}

li a {
  display: block;
  color: white;
  padding: 16px;
  background-color: rgb(80, 80, 205);
  text-align: center;
  text-decoration: none;
}

nav li a:hover {
  background-color: white;
  background-color: rgba(80, 80, 205, 0.3);
  text-decoration: none;
  color: black;
}

<nav>
  <ul>
    <li><a href="#">About me</a></li>
    <li><a href="#links">Social Media</a></li>
    <li><a href="#actual-portfolio">Projects</a></li>
  </ul>
</nav>

Answer 1

您在

中有两个 background-color 声明

nav li a:hover {
  background-color:white;
  background-color: rgba(80, 80, 205, 0.3);
  text-decoration: none;
  color: black;
}

第二个 background-color 与您的 ul { background-color } 相同，并且它是最后一个，因此声明的顺序是这样。

我注释掉了 rgba 那个，它起作用了。

像这样..

nav li a:hover {
  background-color:white;
  //background-color: rgba(80, 80, 205, 0.3);
  text-decoration: none;
  color: black;
}

希望这对您有所帮助，See this fiddle for visuals

欢迎编码！

Answer 2

为 li 添加悬停..

nav {
  width: 100%;
  overflow: hidden;
  margin: 0 0 0 0;
  background-color: rgb(80, 80, 205);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 15pt;
}

nav li {
  float: left;
}

li a {
  display: block;
  color: white;
  padding: 16px;
  background-color: rgb(80, 80, 205);
  text-align: center;
  text-decoration: none;
}

nav li a:hover {
  background-color: rgba(80, 80, 205, 0.3);
  text-decoration: none;
  color: black;
}

nav li:hover {
  background-color: #fff;
}

<nav>
  <ul>
    <li><a href="#">About me</a></li>
    <li><a href="#links">Social Media</a></li>
    <li><a href="#actual-portfolio">Projects</a></li>
  </ul>
</nav>

Answer 3

将悬停 CSS 更改为

nav li a:hover {
  background-color: white;
  color: rgb(80, 80, 205);
  text-decoration: none;
}

在你的代码中

nav li a:hover {
  background-color: white; // First bg declaration
  background-color: rgba(80, 80, 205, 0.3); // Second bg declaration
  text-decoration: none;
  color: black;
}

background-color is given twice. So it takes the second one.

删除那个

nav {
  width: 100%;
  overflow: hidden;
  margin: 0 0 0 0;
  background-color: rgb(80, 80, 205);
  border: 1px solid rgb(80, 80, 205);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 15pt;
}

nav li {
  float: left;
}

li a {
  display: block;
  color: white;
  padding: 16px;
  background-color: rgb(80, 80, 205);
  text-align: center;
  text-decoration: none;
}

nav li a:hover {
  background-color: white;
  color: rgb(80, 80, 205);
  text-decoration: none;
}

<nav>
  <ul>
    <li><a href="#">About me</a></li>
    <li><a href="#links">Social Media</a></li>
    <li><a href="#actual-portfolio">Projects</a></li>
  </ul>
</nav>

悬停时导航栏上的背景颜色更改问题

Issue with background color change on nav-bar when hovered

html

css

web-frontend