導航欄 a:hover 不會改變背景顏色

Question

美好的一天，所以這就是事情。 我以前一直在使用具有導航欄的 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>

Answer 1

這應該是您要查找的代碼。

總體反饋：

1. 確保您的 HEX colors 具有正確的格式（它們需要以 # 開頭） 。
2. 不要使用 ID 進行樣式設置
3. 確保簡化您編寫類/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>