CSS hover error in Navbar component in reactjs

Question

I was working on a navbar in react, the hover on my nav links stopped working all of a sudden!! It still works in my logo as cursor: pointer but not on my nav links on hover!!

Navbar component:


<nav>
        <div className="itemL">
          <a href="#">mjshubham21</a>
        </div>
        <div className="itemR">
          <ul>
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#projects">Projects</a>
            </li>
            <li>
              <a href="#contact">Contact Me</a>
            </li>
            <li>
              <a href="#about">About Me</a>
            </li>
          </ul>
        </div>
      </nav>

styles.css:


nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1.3rem 0.5rem;
  height: 1.3rem;
  background: rgb(2, 0, 36);
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 9, 189, 1) 73%,
    rgba(0, 212, 255, 1) 100%
  );
}

.itemL a {
  text-decoration: none;
  color: aliceblue;
}

.itemR ul {
  display: flex;
  flex-direction: row;
  list-style: none;
}
.itemR ul a {
  text-decoration: none;
  color: aliceblue;
  margin: 0.7rem;
}
.itemR ul a:hover {
  color: rgb(7, 253, 60);
  cursor: pointer;
}

I have checked if the css file is linked, it is... but now I have this hover error on my li in itemR class.

I wanna get my css to work in the navbar as it was previously.

Answer 1

Your links are nested within a <nav> tag. Example: JSFiddle

nav a:hover {
  color: rgb(7, 253, 60);
  cursor: pointer;
}