React에서 호버 스타일을 지정하는 방법

플라톤에 의해 재발행

팔로워 : 0

개요

시각적 개체로 작업하는 것은 인터페이스를 대화형으로 유지하고 사용자의 관심을 끌 수 있는 훌륭한 방법입니다. 화면에 개체를 애니메이션으로 표시하면 독특한 경험을 제공하고 상호 작용이 증가합니다.

이 기사에서는 CSS를 사용하여 React에서 hover 스타일을 지정하는 방법과 인라인 hover 스타일을 지정하는 방법을 배웁니다.

Hover는 마우스가 특정 요소를 켜고 끌 때 사용자가 알 수 있도록 특정 스타일을 추가할 수 있는 의사 클래스입니다. 이 기사에서는 상자를 사용합니다.

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

다음과 같은 기본 스타일이 있습니다.

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

기본적으로 배경색을 다음으로 변경합니다. lightblue 마우스가 상자 위에 있으면 마우스를 제거하면 기본 스타일로 돌아갑니다.

React에서 Hover 스타일을 지정하는 방법

이에 대한 두 가지 접근 방식이 있습니다: 외부 및 인라인. 외부는 호버 스타일을 쉽게 지정할 수 있는 별도의 CSS 파일을 포함하는 반면 인라인 스타일은 의사 클래스로 스타일을 지정할 수 없지만 이 기사에서 마우스 이벤트를 사용하여 인라인 CSS에서 호버의 스타일을 지정하는 방법을 배웁니다.

CSS 외부 스타일링을 사용하여 React에서 Hover 스타일을 지정하는 방법

이것은 HTML과 CSS가 작동하는 방식과 매우 유사합니다. 요소를 제공하기만 하면 됩니다. className (아니신가요 class) 또는 태그를 우리가 타겟팅할 선택기로 사용하고 호버 의사 클래스의 스타일을 지정합니다.

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

우리가 한 모든 것은 :hover 의사 클래스를 이전에 스타일이 지정된 선택기로 변경하고 마우스가 요소 위에 있을 때 변경하려는 속성을 변경합니다.

인라인 스타일링을 사용하여 React에서 Hover 스타일을 지정하는 방법

인라인 스타일링이란 요소의 태그를 통한 스타일 지정을 의미합니다. style 기인하다. 앞의 코드를 인라인 스타일로 변환하려면:

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

앱 내에서 이와 같은 스타일을 반복하면 읽기가 어려울 수 있으므로 페이지에서 단일 개체의 스타일을 지정하고 이에 대한 파일을 만들 필요가 없는 경우 스타일 개체를 만들 수 있습니다.

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

지금까지 우리는 상자를 만들었습니다. React에서 인라인 CSS로 호버 스타일을 지정하려면 상태를 사용하여 인라인 스타일을 조건부로 설정합니다. onMouseEnter 과 onMouseLeave 마우스가 요소 위에 있을 때와 없을 때를 알려주는 props:

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

이 시점에서 조건부로 속성을 사용하여 스타일을 지정할 수 있습니다. *isHover* 상태:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

지금까지 구현하는 방법을 살펴보았습니다. 이제 코드를 분석하고 우리가 사용한 구문을 사용한 이유를 설명하겠습니다. 호버링이 발생할 때를 나타내는 부울 값을 저장하는 상태를 만드는 것으로 시작했습니다(true) 및 그렇지 않으면 (기본적으로 다음으로 설정됩니다. false):

const [isHover, setIsHover] = useState(false);

그런 다음 div에 두 개의 이벤트를 추가하여 상태를 변경하고 마우스가 상자 위에 있을 때와 상자에서 벗어날 때를 알 수 있습니다.

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

XNUMXD덴탈의 onMouseEnter 이벤트는 마우스가 요소에 들어갈 때 트리거되는 반면 onMouseLeave 나갈 때 이벤트가 발생합니다. 우리는 이러한 각 이벤트에 기능을 할당했으며 이제 상태를 변경하는 데 사용합니다.

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

모범 사례, 업계에서 인정하는 표준 및 포함된 치트 시트가 포함된 Git 학습에 대한 실습 가이드를 확인하십시오. 인터넷 검색 Git 명령을 중지하고 실제로 배움 이것!

우리는 state 트리거된 이벤트를 기반으로 각 기능에서 마지막으로 상태를 사용하여 조건부로 상자의 스타일을 지정할 수 있습니다. backgroundColor, 하지만 다른 스타일에도 적용됩니다.

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

이 모든 것을 합치면 이제 인라인 스타일로 React에서 호버 스타일을 지정할 수 있습니다.

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;