Ändern Sie den Klassennamen bedingt in ein CSS-Modul (Reagieren).

Question

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!

Navbar.jsx:

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;

CSS-Modul:

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

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.

Answer 1

您可以完全不使用React逻辑来实现这一点，您可以简单地使用CSS动画（就像您目前正在做的那样）和CSS伪类（在这种情况下是:hover），而不是动态地改变元素的类。

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

请检查这是否对您有用：如何在悬停时播放动画并在悬停不活动时暂停