html - 悬停伪类不适用于 Bootstrap 导航栏 anchor 标记

Question

我有以下 html:

<nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
    <div class="container">
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
               <span class="sr-only">Toggle navigation</span>
            </button><a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navAnchor" href="about.html">About |</a></li>
                <li><a class="navAnchor" href="contact.html">Contact |</a></li>
            </ul>
        </div>
    </div>
</nav>

当我尝试将“navAnchor”类更改为在悬停时显示黑色时，它不起作用。我尝试了不同的方法来做到这一点，但它似乎不起作用。这是我的 CSS:

.navbar > .collapse > .nav > li > a:hover { /* hover is a pseudoclass */
   color: black; 
   text-decoration: underline;
}

我也试过:

li > .navAnchor:hover { /* hover is a pseudoclass */
   color: black; 
   text-decoration: underline;
}

非常感谢任何提示或想法。谢谢! :)

Answer 1

试试下面的代码，它会改变 a 标签 链接的颜色。

.navbar-collapse > .nav > li > .navAnchor:hover { 
   color: black; 
   text-decoration: underline;
}

您甚至可以使用伪 nth-child 选择器 来单独定位它们，

.navbar-collapse > .nav > li:nth-child(1) > .navAnchor:hover { 
   color: black; 
   text-decoration: underline;
}
.navbar-collapse > .nav > li:nth-child(2) > .navAnchor:hover { 
   color: pink; 
   text-decoration: underline;
}