Ändern Sie den Klassennamen bedingt in ein CSS-Modul (Reagieren).
<p>Ich versuche, eine Animation abzuspielen, wenn der Benutzer mit der Maus über die Navigationsleiste meiner Website fährt. Ich versuche dies zu erreichen, indem ich ein CSS-Modul basierend darauf ändere, ob sich die Maus über der Navigationsleiste befindet. Ich versuche herauszufinden, warum dieser Code nicht funktioniert. Jede Hilfe wird sehr geschätzt! </p>
<p>Navbar.jsx:</p>
<pre class="brush:php;toolbar:false;">import React, { useState } from "react";
import { Link } aus „react-router-dom“;
Stile importieren aus „../styles/Navbar.module.css“;
const Navbar = () =>
const [className, setClassName] = useState("line-after");
zurückkehren (
<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">
Um
</Link>
</li>
<li>
<Link to="/resume" className="resume-page">
Wieder aufnehmen
</Link>
</li>
<li>
<Link to="/contact" className="contact-page">
Kontakt
</Link>
</li>
</ul>
</nav>
<div className={styles.className}></div>
</div>
);
};
Standard-Navbar exportieren;</pre>
<p>CSS-Modul:</p>
<pre class="brush:php;toolbar:false;">.line::before {
Inhalt: "";
Position: absolut;
oben: 0;
links: 0;
Breite: 55px;
Höhe: 1px;
Hintergrund: schwarz;
Animationsname: animieren;
Animationsdauer: 1s;
}
.line-after {
Rand: 40px 40px 40px 40px;
Breite: 55px;
Höhe: 1px;
Hintergrund: weiß;
Position: relativ;
}
@keyframes animieren {
0 % {
links: 0;
}
100% {
links: 100 %;
}
}</pre>
<p>Ich ändere den Status des Klassennamens, wenn die Maus die Navigationsleiste verlässt und betritt. Allerdings heißt es, dass meine Statusvariable className nie verwendet wird, also denke ich, dass das das Problem ist. Ich bin mir nicht sicher, wie ich das Problem beheben kann. </p>
