Navbar a:hover 不会改变背景颜色答案

【问题标题】：Navbar a:hover won't change backgroundd colorNavbar a:hover 不会改变背景颜色
【发布时间】：2021-01-19 20:40:28
【问题描述】：

美好的一天！所以事情是这样的，我以前一直在使用一个带有导航栏的 HTML 文件。不幸的是，我做了一些更改，导致我的导航栏没有更改背景颜色和文本颜色。当导航栏上的文本悬停在上面时，它以前能够变成明亮的橙色/金色。我不知道发生了什么，请帮助我。我对此有些陌生。

HTML 文件（浏览器）

body {
  background-image: url("assets/background.png");
  background-height: 100%;
  background-width: 100%;
  position: relative;
  text-align: center;
}

#home {
  background-color: 009598;
  color: white;
}

#navbar a:hover {
  background-color: f78104;
  color: black;
}

.header {
  background-image: url("assets/grayUnderlay.png");
  position: relative;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <img id="homeImg" src="assets/logo.png">
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#" id="home">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact Me</a></li>
    </ul>
    <p id="name"><img id="mePic" src="assets/favicon.png">...</p>
  </div>
</nav>

【问题讨论】：

你能不能把截图换成实际的代码/代码sn-p，这样我们就不需要为了帮助而重新输入所有内容了？
您应该添加代码 sn-p，而不是屏幕截图。不仅如此，如果没有十六进制标记 (#)，CSS 颜色就无法工作，而且您似乎缺少几个 HTML ID 属性。代码可能无法正常工作，因为您的 HTML 中没有 #navbar ID，因此不适用任何样式。
也许你的意思是.navbar。请参阅stackoverflow.com/help/how-to-ask。
问题被标记为 [bootstrap-5] 但您的代码基于 [bootstrap-3] 导航栏

标签： html css navbar bootstrap-5

【解决方案1】：

这应该是您要查找的代码。

总体反馈：

确保您的 HEX 颜色具有正确的格式（它们需要以 # 开头）。
请勿使用 ID 进行样式设置
确保简化编写类/ID 的方式，可能要遵循当前框架的命名约定

body {
  background-image: url("assets/background.png");
  background-color: aqua;
  background-size: cover;
  position: relative;
  text-align: center;
}

.header {
  background-image: url("assets/grayUnderlay.png");
  position: relative;
}

.home {
  background-color: #009598;
  color: white;
}

.navbar a:hover {
  background-color: #f78104;
  color: black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <img src="assets/logo.png" alt="" class="home-img">
    </div>
    <ul class="nav navbar-nav">
      <li><a href="#" class="home">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact Me</a></li>
    </ul>

    <p class="name"><img src="assets/favicon.png" alt="" class="me-pic">...</p>
  </div>
</nav>

【讨论】：