hover에 따라 글자 및 아이콘 색 변경

1. 카드에 hover 효과 주기

• hover:bg-[변경할 색]

<div className="group w-96 h-28 bg-white1 rounded-md shadow-lg mt-5 flex flex-row hover:bg-green1">

2. group 추가하기

• hover를 줬을 때 글자색과 아이콘 색도 변경되게 하려면 hover를 주는 요소에 group을 넣어주면 된다.

<div className="group w-96 h-28 bg-white1 rounded-md shadow-lg mt-5 flex flex-row hover:bg-green1">

3. 글자색 변경

• hover에 따라서 글자색을 변경하려면 group-hover: text-[변경할 색] 추가해준다.

<span className="mt-2	font-bold group-hover:text-white1">{title}</span>

4. 아이콘 색 변경

• hover에 따라서 아이콘 색을 변경하려면 group-hover:fill-[변경할 색] 추가해준다.

<NavigateNextIcon className="mt-5 cursor-pointer group-hover:fill-white1" onClick={() => navigate(`${route}`)} />

5. 전체 코드

return (
    <div className="group w-96 h-28 bg-white1 rounded-md shadow-lg mt-5 flex flex-row hover:bg-green1">
      <div className="flex space-x-20">
        <div className="flex flex-col m-6 p-3 w-48">
          <span className="mt-2	font-bold group-hover:text-white1">{title}</span>
        </div>
        <div className="flex flex-row m-5 ">
          <NavigateNextIcon className="mt-5 cursor-pointer group-hover:fill-white1" onClick={() => navigate(`${route}`)} />
        </div>
      </div>
    </div>
  );

참고 자료

• https://tailwindcss.com/docs/hover-focus-and-other-states