reactjs中Navbar组件的CSS悬停错误

anauzrmj  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(81)

我正在一个导航栏上工作,在我的导航链接上的悬停突然停止工作!!它仍然在我的徽标中作为光标工作:指针,但不是在我的导航链接悬停!!

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

x1c 0d1x我已经检查了css文件是否被链接,它是...但是现在我在itemR类的li上有这个悬停错误。
我想让我的css在导航栏中像以前一样工作。

pw9qyyiw

pw9qyyiw1#

您的链接嵌套在<nav>标记中。例如:JSFiddle

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

相关问题