hover 속성을 이용하면 DOM 요소에 커서를 올렸을 때 요소의 배경색을 바꾸는 등의 기능을 쉽게 구현할 수 있습니다.
그렇다면 커서를 올린 DOM 요소 이외의 다른 요소의 속성을 건드리려면 어떻게 해야 할까요?
<Link
href={p.url}
className="flex flex-row items-start mt-6 pl-4 pr-6 py-4 rounded-md hover:shadow-sm hover:bg-cyan-100/50 group"
>
<div className="w-[120px] relative pr-2 mr-2">
<Image
src={p.thumbnail}
alt={p.title}
width={100}
height={100}
className="aspect-video border-2 border-white group-hover:border-cyan-200/50 rounded-md"
/>
</div>
<div className="w-[380px] overflow-auto">
<p className="font-semibold text-lg group-hover:text-blue-700/80">
{p.title}
</p>
<p className="mt-1 text-md">{p.description}</p>
<div className="flex flex-row gap-1 flex-wrap mt-1">
{p.techstacks.map((tech) => (
<div
key={tech}
className="rounded-xl bg-slate-800 text-white px-2 py-1 text-xs text-nowrap"
>
{tech}
</div>
))}
</div>
</div>
</Link>위처럼 group 속성과 group-hover 속성을 활용하면 group으로 묶인 요소 전체에 hover했을 때의 속성 변화를 group-hover 속성이 있는 요소에만 줄 수 있습니다.
위 코드로 만들어낸 결과는 아래와 같습니다. 프로젝트 제목 부분에 커서를 올리지 않아도 프로젝트 제목 부분의 색깔이 변하는 것을 확인할 수 있습니다. 간단하지만 앞으로도 활용할 구석이 많을 것 같습니다.
