찾다

 >  Q&A  >  본문

조건부로 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 /> 존스 </링크>
P粉799885311P粉799885311466일 전508

모든 응답(1)나는 대답할 것이다

  • P粉124890778

    P粉1248907782023-08-18 10:25:38

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

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

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

    회신하다
    0
  • 취소회신하다