Tailwind CSS를 사용한 하이라이트 호버 효과

웹에서 호버링하는 요소의 불투명도가 완전하고 형제 요소의 불투명도가 낮은 호버 효과를 볼 수 있습니다. 이렇게 보일 수 있습니다.



보시다시피 왼쪽 항목에서 두 번째 항목은 완전히 불투명한 반면 다른 항목은 희미합니다.

어떻게?… Tailwind CSS에서

[&:hover>li]와 같은 것을 작성할 수 있는 새롭고 무시무시한 구문 덕분에 사용자 정의 CSS 없이도 이 작업을 매우 쉽게 수행할 수 있습니다 🎉

그래서 우리는 무엇이 필요합니까?

가리키면 하위 요소의 불투명도가 낮아지는 상위 요소

가리키면 자식 요소가 불투명도를 재정의함

여기에 간단한 버전이 있습니다.

<ul class="[&:hover>li]:opacity-50]">
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
</li>

여기서는 별 일이 없지만 분해해 보겠습니다.
[&:hover>li]:opacity-50]ul가 호버링되면 li 요소를 대상으로 하고 불투명도를 0.5로 낮춥니다.
hover:!opacity-100li 요소가 마우스를 올리면 불투명도를 1로 되돌립니다. !를 적용하는 !important 수정자로 강제합니다.

이것이 Tailwind CSS를 사용하는 이와 같은 모든 호버 효과의 기반입니다. 이제 해당 로직을 가져와 내장 디자인에 적용할 수 있습니다.

Highlight Hover Example


한 가지 알 수 있는 것은 li 요소 사이의 간격에 마우스를 올려 놓을 때 커서가 ul 내에 있을 때 요소가 강조 표시되도록 하기 위한 것입니다.

내가 작성한 Negative Hover 패키지와 같은 것을 사용하여 JavaScript로 이 문제를 해결할 수 있습니다.