<p>사용자가 내 웹사이트의 탐색 메뉴 위로 마우스를 가져갈 때 애니메이션을 재생하려고 합니다. 마우스가 탐색 모음 위에 있는지 여부에 따라 CSS 모듈을 변경하여 이를 달성하려고 합니다. 이 코드가 작동하지 않는 이유를 알아내려고 노력 중입니다. 어떤 도움이라도 대단히 감사하겠습니다! </p>
<p>Navbar.jsx:</p>
<pre class="brush:php;toolbar:false;">"react"에서 React, { useState } 가져오기;
"react-router-dom"에서 { Link }를 가져옵니다.
"../styles/Navbar.module.css"에서 스타일을 가져옵니다.
const Navbar = () =>
const [className, setClassName] = useState("line-after");
반품 (
<div
클래스명="탐색바"
onMouseEnter={() => setClassName("line::before")}
onMouseLeave={() => setClassName("line-after")}
>
<탐색>
<="/about" className="home-page" 링크>
단발
<br />
존스
</링크>
-
<링크:="/about" className="about-page">
에 대한
</링크>
</li>
-
<Link to="/resume" className="resume-page">
재개하다
</링크>
</li>
-
<Link to="/contact" className="contact-page">
연락하다
</링크>
</li>
</ul>
</nav>
<div className={styles.className}></div>
</div>
);
};
기본 Navbar 내보내기;</pre>
<p>Css 모듈: </p>
<pre class="brush:php;toolbar:false;">.line::before {
콘텐츠: "";
위치: 절대;
상단: 0;
왼쪽: 0;
너비: 55px;
높이: 1px;
배경: 검정색;
애니메이션 이름: 애니메이션;
애니메이션 지속 시간: 1초;
}
.line-뒤에 {
여백: 40px 40px 40px 40px;
너비: 55px;
높이: 1px;
배경: 흰색;
위치: 상대;
}
@keyframes 애니메이션 {
0% {
왼쪽: 0;
}
100% {
왼쪽: 100%;
}
}</pre>
<p>마우스가 네비게이션 바를 떠났다가 들어갈 때 className의 상태를 변경하고 있습니다. 그런데 내 상태변수인 className은 한번도 사용되지 않았다고 나오네요. 그게 문제인거 같아요. 문제를 해결하는 방법을 잘 모르겠습니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
React 로직을 전혀 사용하지 않고도 이 작업을 수행할 수 있습니다. 요소의 클래스를 동적으로 변경하는 대신 CSS 애니메이션(현재 수행 중인 것처럼)과 CSS 의사 클래스(이 경우 :hover)를 사용하면 됩니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
이것이 귀하에게 적합한지 확인하십시오: 호버에서 애니메이션을 재생하고 호버가 비활성화된 상태에서 일시 중지하는 방법