Changer conditionnellement className en module css (React)
<p>J'essaie de lire une animation lorsque l'utilisateur survole la barre de navigation de mon site Web. J'essaie d'y parvenir en modifiant un module CSS selon que la souris survole la barre de navigation. J'essaie de comprendre pourquoi ce code ne fonctionne pas. Toute aide est grandement appréciée! </p>
<p>Navbar.jsx :</p>
<pre class="brush:php;toolbar:false;">importer React, { useState } depuis "react" ;
importer {Lien} depuis "react-router-dom" ;
importer des styles depuis "../styles/Navbar.module.css" ;
const Barre de navigation = () =>
const [className, setClassName] = useState("line-after");
retour (
<div
className="barre de navigation"
onMouseEnter={() => setClassName("line::before")}
onMouseLeave={() => setClassName("ligne-après")}
>
<nav>
<Lien vers="/à propos" className="page d'accueil">
Bob
<br />
Jones
</Lien>
<ul>
<li>
<Lien vers="/about" className="about-page">
À propos
</Lien>
≪/li>
<li>
<Lien vers="/resume" className="resume-page">
CV
</Lien>
≪/li>
<li>
<Lien vers="/contact" className="contact-page">
Contact
</Lien>
≪/li>
</ul>
</nav>
<div className={styles.className}></div>
</div>
);
} ;
exporter la barre de navigation par défaut ;</pre>
<p>Module CSS :</p>
<pre class="brush:php;toolbar:false;">.line::before {
contenu: "";
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 55 px ;
hauteur : 1px ;
fond : noir ;
nom-animation : animer ;
durée de l'animation : 1 s ;
}
.ligne-après {
marge : 40px 40px 40px 40px ;
largeur : 55 px ;
hauteur : 1px ;
fond : blanc ;
position : relative ;
}
@keyframes animer {
0% {
gauche : 0 ;
}
100 % {
gauche : 100 % ;
}
}</pré>
<p>Je change l'état du nom de classe lorsque la souris quitte et entre dans la barre de navigation. Cependant, il est indiqué que ma variable d'état className n'est jamais utilisée, donc je pense que c'est le problème. Je ne suis pas sûre de pouvoir régler ça. </p>
