单击或悬停后如何更改图标和文本的颜色？

Question

我现在是编码和项目工作的新手。我目前有一个侧面导航栏，当我将鼠标悬停在其上或单击该路线（例如，如果我单击“主页”）时，我试图让图标和文本更改颜色（例如，如果我单击“主页”），它将保持蓝色，直到我单击另一个链接，并在将鼠标悬停在其他链接上时使其保持蓝色。

这是我的侧面导航栏的代码：

const Navbar = ({ handleClick, isLoggedIn, email }) => (
  <div className="wrapper">
    <nav
      className="navbar navbar-expand d-flex flex-column align-item-center-start"
      id="sidebar"
    >
      <a href="/" className="navbar-brand text-light mt-2">
        <div className="display-6 font-weight-bold">
          <span>SPODify +</span>
        </div>
      </a>
      <ul className="navbar-nav d-flex flex-column w-100 mt-4">
        <li className=" h-25 nav-item border-bottom">
          <a href="/" className="nav-link text-light pl-4">
            <i className="bi bi-house-door "></i>
           HOME
          </a>
        </li>

        <li className="h-25  nav-item border-bottom">
          <a href="#" className="nav-link text-light ">
            <i className="bi bi-search"></i>
            SEARCH
          </a>
        </li>

        <li className="nav-item h-10 border-bottom">
          <a href="/show" className="nav-link text-light ">
            <i className="bi bi-rainbow"></i>
            PODCASTS
          </a>
        </li>

        <li className="nav-item h-25 border-bottom">
          <a href="#" className="nav-link text-light pl-4">
            <i className="bi bi-collection"></i>
            YOUR LIBRARY
          </a>
        </li>

        {isLoggedIn ? (
          <>
            <li className="nav-item h-25 border-bottom">
              <a href="/login" className="nav-link text-light pl-4">
                <i className="bi bi-person-circle"></i>
                {email}
              </a>
            </li>
            <li className="nav-item h-25 border-bottom">
              <a
                href="#"
                onClick={handleClick}
                className="nav-link text-light pl-4"
              >
                LOGOUT
              </a>
            </li>
          </>
        ) : (
          <li className="nav-item h-25 border-bottom">
            <a href="/login" className="nav-link text-light pl-4">
              LOGIN
            </a>
          </li>
        )}
      </ul>
    </nav>
    <div>
      {isLoggedIn ? (
        <div>
          <Home email={email} />{" "}
        </div>
      ) : (
        <div>
          <h1>WELCOME, SIGN UP</h1>
          <Signup />
        </div>
      )}
    </div>
  </div>
);

我尝试通过将其添加到我的 CSS 文件中来实现此目的：

nav a.nav-link:hover {
  background-color: blue;
}

但这只会使整个部分变成蓝色：

有关如何更改的任何提示仅当我将鼠标悬停在其上并单击链接时显示图标和文本？提前致谢！

作为参考，这就是我想要实现的目标：

当前单击“主页”链接并将鼠标悬停在“客人”上，这就是它具有不同颜色的原因

Answer 1

你的路是对的。要更改文本和图标的颜色，您需要将 background-color 更改为 color 此 css：

nav a.nav-link:hover {
  color: blue; 
}

示例：

a:hover{
  color: blue;
}

<ul>
  <li>
    <a>My Test</a>
  </li>
</ul>

对于活动部分（单击后），您需要为此添加一个额外的类。 （例如：.active）。然后你可以像悬停它时一样设置它的样式：

a:hover,
a.active{
  color: blue;
}