CSS hover reactjs Navbar組件錯誤

Question

我在反應中使用導航欄，導航鏈接上的 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;
}

我已經檢查了 css 文件是否已鏈接，它是......但現在我在 itemR class 的 li 上有這個 hover 錯誤。

我想讓我的 css 像以前一樣在導航欄中工作。

Answer 1

您的鏈接嵌套在<nav>標簽中。 示例： JSFiddle

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