我正在嘗試在用戶懸停在我的網站導航欄上時播放動畫。我試圖透過根據滑鼠是否懸停在導覽列上來更改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 ( 
 setClassName("line::before")} onMouseLeave={() => setClassName("line-after")} >  
 
 ); }; 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從未被使用過，所以我認為這是問題所在。不確定如何修復它。