有條件地將className更改為css模組（React）

Question

我正在嘗試在用戶懸停在我的網站導航欄上時播放動畫。我試圖透過根據滑鼠是否懸停在導覽列上來更改css模組來實現這一目標。我正在努力弄清楚為什麼這段程式碼不起作用。非常感謝任何幫助！

Navbar.jsx：

import React, { useState } from "react";
import { Link } from "react-router-dom";
import styles from "../styles/Navbar.module.css";

const Navbar = () => {
  const [className, setClassName] = useState("line-after");
  return (
    <div
      className="navbar"
      onMouseEnter={() => setClassName("line::before")}
      onMouseLeave={() => setClassName("line-after")}
    >
      <nav>
        <Link to="/about" className="home-page">
          Bob
          <br />
          Jones
        </Link>
        <ul>
          <li>
            <Link to="/about" className="about-page">
              About
            </Link>
          </li>
          <li>
            <Link to="/resume" className="resume-page">
              Resume
            </Link>
          </li>
          <li>
            <Link to="/contact" className="contact-page">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div className={styles.className}></div>
    </div>
  );
};

export default Navbar;

Css模組：

.line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 1px;
    background: black;
    animation-name: animate;
    animation-duration: 1s;
}

.line-after {
    margin: 40px 40px 40px 40px;
    width: 55px;
    height: 1px;
    background: white;
    position: relative;
}

@keyframes animate {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
     }
}

當滑鼠離開並進入導覽列時，我正在更改className的狀態。然而，它說我的狀態變數className從未被使用過，所以我認為這是問題所在。不確定如何修復它。

Answer 1

您可以完全不使用React邏輯來實現這一點，您可以簡單地使用CSS動畫（就像您目前正在做的那樣）和CSS偽類（在這種情況下是:hover），而不是動態地改變元素的類別。

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

#請檢查這是否對您有用：如何在懸停時播放動畫並在懸停不活動時暫停