group-hover

export default function Logo() {
  return (
    <nav className="home navigation">
      <h1 className="cursor-pointer sm:text-lg md:text-xl font-fira-code hover:text-light-coral">
        <span className="text-light-coral">{"<"}</span>
        <span className="text-white mx-3">JH</span>
        <span className="text-light-coral">{"/>"}</span>
      </h1>
    </nav>
  );
}

 

hover 시 글자 색을 바꾸려고 한다.

그래서 부모에 hover을 적용하면 자식 태그 글자 색이 모두 바뀔 것이라고 생각했다.

하지만 생각과 다르게 JH가 변하지 않았다.

찾아보니

tawilwind css에서 자식 요소에 글자 색이 이미 들어 있으면 부모 요소가 그것을 hover로 바꿀 수 없다고 한다.

 

이에 대한 해결법으로 group와 group-hover가 있다고 한다.

group으로 부모 hover 상태를 공유하고,

group-hover로 부모 hover 시 자식이 반응하도록 한다.

그러면 부모가 hover 상태일 때,
자식이 group-hover를 통해 부모 hover 상태에 반응하여 글자색이 바뀐다.

export default function Logo() {
  return (
    <nav className="home navigation">
      <h1 className="group cursor-pointer sm:text-lg md:text-xl font-fira-code">
        <span className="text-light-coral">{"<"}</span>
        <span className="text-white mx-3 group-hover:text-light-coral">JH</span>
        <span className="text-light-coral">{"/>"}</span>
      </h1>
    </nav>
  );
}