조건부로 className을 CSS 모듈로 변경(React)
<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>
