Manuel Stoilov Manuel Stoilov - 2 months ago 7
CSS Question

Hover pseudoclass not working on a bootstrap navbar anchor tag

I have the following 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>


When I try to change the "navAnchor" class to display a black color when I hover, it doesn't work. I've tried different ways to do it, but it doesn't seem to work. Here's my css:

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


I've also tried:

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


Any tips or ideas are greatly appreciated. Thanks! :)


Answer

Try below code, it changes the a tag link color.

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

You can even use pseudo nth-child selector to target them individually,

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