ユーザーが Web サイトのナビゲーション バーの上にマウスを置いたときにアニメーションを再生しようとしています。マウスがナビゲーションバー上にあるかどうかに基づいて CSS モジュールを変更することでこれを実現しようとしています。このコードが機能しない理由を理解しようとしています。ご協力をよろしくお願いいたします。

Navbar.jsx:

import React, { useState } from "react"; import { Link } から "react-router-dom"; 「../styles/Navbar.module.css」からスタイルをインポートします。 const Navbar = () => { const [クラス名, setクラス名] = useState("行後"); 戻る （
      
 setclassname("line::before")} onmouseleave="{()" setclassname("line-after")}>
       <ナビ> <「/about」へのリンク ボブ 
 ジョーンズ 
       

        
; <リンク先: "/about" className="about-page"> について  
        
; <リンク先="/resume" className="resume-page"> 再開する  
        
; <「/contact」へのリンク className="contact-page"> 接触  
 
  
 
 ); }; デフォルトのナビゲーションバーをエクスポート;

Css モジュール:

.line::before { コンテンツ： ""; 位置: 絶対; トップ: 0; 左: 0; 幅: 55ピクセル; 高さ: 1px; 背景: 黒; アニメーション名: アニメート; アニメーション期間: 1 秒。 } .line-after { マージン: 40 ピクセル 40 ピクセル 40 ピクセル 40 ピクセル; 幅: 55ピクセル; 高さ: 1px; 背景: 白; 位置: 相対的; } @keyframes アニメーション化 { 0% { 左: 0; } 100% { 左: 100%。 } }

マウスがナビゲーション バーから離れてナビゲーション バーに入ったときの className の状態を変更しています。ただし、状態変数 className は決して使用されないと書かれているので、それが問題だと思います。修正方法がわかりません。