Saya cuba memainkan animasi apabila pengguna menuding pada bar navigasi tapak web saya. Saya cuba mencapai ini dengan menukar modul css berdasarkan sama ada tetikus melayang di atas bar navigasi. Saya cuba memikirkan mengapa kod ini tidak berfungsi. Sebarang bantuan amat dihargai!

Navbar.jsx:

import React, { useState } daripada "react"; import { Pautan } daripada "react-router-dom"; import gaya daripada "../styles/Navbar.module.css"; const Navbar = () => const [className, setClassName] = useState("line-after"); kembali ( 
 setClassName("line::before")} onMouseLeave={() => setClassName("line-after")} >  
 
 ); }; eksport Navbar lalai;

Modul css:

.line::before { kandungan: ""; jawatan: mutlak; atas: 0; kiri: 0; lebar: 55px; ketinggian: 1px; latar belakang: hitam; animasi-nama: bernyawa; tempoh animasi: 1s; } .line-after { jidar: 40px 40px 40px 40px; lebar: 55px; ketinggian: 1px; latar belakang: putih; kedudukan: relatif; } @keyframes menghidupkan { 0% { kiri: 0; } 100% { kiri: 100%; } }

Saya menukar keadaan className apabila tetikus keluar dan memasuki bar navigasi. Walau bagaimanapun, ia mengatakan bahawa className pembolehubah keadaan saya tidak pernah digunakan, jadi saya fikir itulah masalahnya. Tidak pasti bagaimana untuk membetulkannya.