조건부로 className을 CSS 모듈로 변경(React)

Question

<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>

Answer 1

React 로직을 전혀 사용하지 않고도 이 작업을 수행할 수 있습니다. 요소의 클래스를 동적으로 변경하는 대신 CSS 애니메이션(현재 수행 중인 것처럼)과 CSS 의사 클래스(이 경우 :hover)를 사용하면 됩니다.

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

이것이 귀하에게 적합한지 확인하십시오: 호버에서 애니메이션을 재생하고 호버가 비활성화된 상태에서 일시 중지하는 방법