單擊或懸停后如何更改圖標和文本的顏色？

Question

我現在是編碼和項目工作的新手。 我目前有一個側面導航欄，當我在其上輸入 hover 或點擊該路線（例如，如果我點擊主頁）時，我試圖讓圖標和文本改變顏色，它會保持藍色, 直到我點擊另一個鏈接，並在我將鼠標懸停在其他鏈接上時保持藍色。

這是我的側導航欄代碼：

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

但這只會讓整個部分變藍：

關於如何在我 hover 上單擊鏈接后僅更改圖標和文本的任何提示？ 提前致謝！

作為參考，這就是我想要實現的目標：

當前點擊主頁鏈接並將鼠標懸停在客人上方，這就是為什么它是不同顏色的原因

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>

對於活動部分（單擊后），您需要為此添加一個額外的 class。 （例如： .active ）。 然后你可以像懸停它時一樣設置它的樣式：

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