悬停伪类不在引导导航栏锚标记上工作

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>

当我尝试更改＆＃34; navAnchor＆＃34;当我悬停时显示黑色的类，它不起作用。我尝试过不同的方法，但它似乎没有用。这是我的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 tag链接颜色。

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

您甚至可以使用伪nth-child selector单独定位它们，

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

Answer 2

是否有样式覆盖它？也许尝试color: black !important;如果有效，那就意味着有些事情会覆盖它。

Answer 3

这可能有效：

.nav li a:hover{
    color: black; 
    text-decoration: underline;
}

Answer 4

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

请尝试这样。

Answer 5

尝试

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

而不是

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃34;＆gt;＆＃34;在.navbar背后直接的孩子。