有条件地将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

请检查这是否对您有用：如何在悬停时播放动画并在悬停不活动时暂停