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

的适用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，这是行不通的......你必须将它分配给父类=＆gt; navpage-links代替navpage-link !!

working demo

这是错误：

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

CSS Puzzle - Classed Link Span在悬停时不会改变颜色

1 个答案: