有条件地将className更改为css模块(React)
P粉799885311
2023-08-17 18:10:17
<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>
您可以完全不使用React逻辑来实现这一点,您可以简单地使用CSS动画(就像您目前正在做的那样)和CSS伪类(在这种情况下是:hover),而不是动态地改变元素的类。
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
请检查这是否对您有用:如何在悬停时播放动画并在悬停不活动时暂停