I can't seem to get the links in my navbar to change color when I hover over them, even though I've used the :hover selector. Can someone please assist me with this?
<header>
<nav class="navbar navbar-expand-lg navbar-dark static-top my-navbar my-navbar">
<div class="container">
<button`enter code here`
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item active">
<a class="nav-link my-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Here is the CSS code I have:
/* --- Navbar --- */
.my-navbar {
background: rgba(116, 118, 119, 0.5);
}
ul li a {
font-family: "Libre Baskerville", serif;
}
a:hover {
color: black;
}
/* --- Navbar End --- */