Question

当鼠标悬停在导航栏上时，我试图让导航栏的背景颜色发生变化。我能够这样做 CSS：

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

为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 2

您在

中有两个background-color声明

＆＃13;

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

＆＃13;

第二个与background-color具有相同的ul { background-color }，并且它是最后一个，因此声明顺序会将其选中。

我注释掉rgba一个，但它确实有效。

像这样......

＆＃13;

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

＆＃13;

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

欢迎使用编码！

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;
}

背景颜色给出两次。所以需要第二个。

删除

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

3 个答案: