Changer conditionnellement className en module css (React)

Question

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!

Navbar.jsx :

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 ;

Module CSS :

.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 % ;
     }
}
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. 

Answer 1

Vous pouvez y parvenir sans utiliser du tout la logique React, vous pouvez simplement utiliser des animations CSS (comme vous le faites actuellement) et des pseudo-classes CSS (dans ce cas :hover) au lieu de changer dynamiquement la classe de l'élément.

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Veuillez vérifier si cela fonctionne pour vous : Comment lire une animation en survol et mettre en pause en survol inactif