有條件地將className更改為css模組(React)
<p>我正在嘗試在用戶懸停在我的網站導航欄上時播放動畫。我試圖透過根據滑鼠是否懸停在導覽列上來更改css模組來實現這一目標。我正在努力弄清楚為什麼這段程式碼不起作用。非常感謝任何幫助! </p>
<p>Navbar.jsx:</p>
<pre class="brush:php;toolbar:false;">import React, { useState } from "react";
import { Link } from "react-router-dom";
import styles from "../styles/Navbar.module.css";
const Navbar = () => {
const [className, setClassName] = useState("line-after");
return (
<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">
About
</Link>
</li>
<li>
<Link to="/resume" className="resume-page">
Resume
</Link>
</li>
<li>
<Link to="/contact" className="contact-page">
Contact
</Link>
</li>
</ul>
</nav>
<div className={styles.className}></div>
</div>
);
};
export default Navbar;</pre>
<p>Css模組:</p>
<pre class="brush:php;toolbar:false;">.line::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 55px;
height: 1px;
background: black;
animation-name: animate;
animation-duration: 1s;
}
.line-after {
margin: 40px 40px 40px 40px;
width: 55px;
height: 1px;
background: white;
position: relative;
}
@keyframes animate {
0% {
left: 0;
}
100% {
left: 100%;
}
}</pre>
<p>當滑鼠離開並進入導覽列時,我正在更改className的狀態。然而,它說我的狀態變數className從未被使用過,所以我認為這是問題所在。不確定如何修復它。 </p>