CSS拼圖-分級鏈接跨度不會在懸停時更改顏色

Question

我有一些CSS，允許我的菜單項一個接一個地加載。 每個鏈接都位於一個不錯的范圍內。 在封面上，跨度為黑色，懸停時變為深藍色。 在其他頁面上，鏈接為灰色，但懸停不起作用。 沒有顏色變化。

懸停代碼沒有被觸及，只是引入了一個類，所以我不確定為什么它不起作用。 這些代碼是：

HTML：

<!-- navigation -->

    <nav id="navpage">

    <a href="index.html"><img class="logo" src="img/logo.png" alt="ALT" width="130" height="130" /></a>
    <ul class="navpage-links">
       <li class="navpage-link work"><a href="portfolio.html">My Work</a></li>
       <li class="navpage-link about"><a href="about.html">About Me</a></li>
       <li class="navpage-link contact"><a href="contact.html">Contact Me</a></li>
       <li class="navpage-link blog"><a href="Link">The Blog</a></li>
    </ul>

    </nav>
<!-- close navigation -->

正在懸停的原始CSS：

.nav-link a, .nav-link span.link-placeholder {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.85);
    line-height: 30px;
    padding: 0 5px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

.nav-link.about a.hover {
    background-color: #0089d2;
}

ISN“ T工作的適用CSS：

.navpage-link a, .navpage-link span.link-placeholder {
    display: block;
    color: rgba(255, 255, 255, 1.5);
    background: rgba(102, 102, 102, 0.4);
    line-height: 30px;
    padding: 0 5px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

.navpage-link.about a.hover {
    background-color: #0089d2;
}

如您所見，除了調整課程外，我沒有更改代碼……我錯過了什么？

Answer 1

您要在CSS中處理錯誤的child-class ，這是行不通的...。您必須將其分配給父類=> navpage-links而不是navpage-link ！

工作演示

這是錯誤：

.navpage-link.about a.hover {
  /*        ^^ a space and "s" is missing here */
    background-color: #0089d2;
}

更改為：

.navpage-links .about a.hover {
      /*      ^^ notice here */
        background-color: #0089d2;
    }