이 문서에서는 Tailwind CSS를 사용하여 가시성 속성으로 hover 및 기타 상태를 적용하는 구현 절차를 다룹니다.
Tailwind에서 가시성 유틸리티로 호버 및 기타 상태를 적용하는 방법은 무엇입니까?
가시성 유틸리티는 호버 및 기타 상태와 함께 사용되어 사용자 상호 작용에 대한 가시성을 변경할 수 있습니다. 가시성 유틸리티에는 ' 보이는 ”, “ 보이지 않는 ', 그리고 ' 무너지다 '. 더 나은 이해를 위해 아래 예에서 일부 가시성 클래스를 호버 상태와 통합해 보겠습니다.
예제 1: 'invisible' 클래스에 호버 상태 적용
이 경우 선택한 요소는 사용자의 커서가 요소 위에 있을 때 숨겨지며 코드는 다음과 같습니다.
< 몸 >
< 사업부 수업 = '그리드 grid-cols-3 gap-4 my-4 mx-4' >
< 사업부 수업 = 'bg-blue-500 p-3 둥근 텍스트 중심' > 01 < / 사업부 >
< 사업부 수업 = 'bg-blue-500 p-3 hover:보이지 않는 둥근 텍스트 중심' > 02 < / 사업부 >
< 사업부 수업 = 'bg-blue-500 p-3 둥근 텍스트 중심' > 03 < / 사업부 >
< / 사업부 >
< / 몸 >
위 코드에 대한 설명:
- 먼저 각 열 사이에 공백이 있고 ' 4px '. Tailwind CSS 사용 ' 그리드 ”, “ 그리드-cols-3 ”, “ 갭 ”, “ 나의 ', 그리고 ' mx ”수업.
- 다음으로 세 아이 “ 사업부 ” 요소가 생성되고 기본 스타일이 적용됩니다.
- 그런 다음 ' 호버링 ” CSS의 상태 또는 선택기는 두 번째 “div”에 할당되고 “ 보이지 않는 ”는 콜론 “으로 구분하여 할당됩니다. : ' 징후. 이렇게 하면 마우스를 가져가면 두 번째 div가 보이지 않습니다.
실행 단계 후 웹페이지 미리보기:
위의 gif는 두 번째 div가 마우스 호버에서 보이지 않게 되는 것을 보여줍니다.
예제 2: '보이지 않는' 클래스에 활성 상태 적용
'활성' 상태는 사용자가 특정 요소를 선택하고 떠나지 않을 때 스타일을 적용합니다. 사용자가 필드 내부에 데이터를 입력하기 시작할 때 텍스트 상자와 마찬가지로 이때 필드가 활성화됩니다. 활성 상태와 '보이지 않는' 클래스에서 작동하는 방식을 더 명확하게 이해하려면 아래 코드를 방문하십시오.
< 몸 >< 사업부 수업 = '그리드 grid-cols-3 gap-4 my-4 mx-4' >
< 사업부 수업 = 'bg-blue-500 p-3 둥근 텍스트 중심' >01< / 사업부 >
< 사업부 수업 = 'bg-blue-500 p-3 활성:보이지 않는 둥근 텍스트 중앙' >02< / 사업부 >
< 사업부 수업 = 'bg-blue-500 p-3 둥근 텍스트 중심' >03< / 사업부 >
< / 사업부 >
< / 몸 >
위의 코드에서 ' 보이지 않는 '는 '에 할당됩니다. 활동적인 ” 두 번째 상태 “ 사업부 ” 요소를 선택하여 두 번째 div 요소를 숨길 수 있습니다.
실행 후 웹 페이지의 미리 보기는 다음과 같이 나타납니다.
위의 출력은 두 번째 'div'가 선택되면 요소가 보이지 않게 됨을 보여줍니다.
결론
호버 및 활성 또는 초점과 같은 기타 상태는 가시성 유틸리티에서 제공하는 클래스와 함께 사용하여 선택한 요소의 가시성 속성을 수정할 수 있습니다. 마우스 호버에 대한 요소의 가시성을 변경하기 위해 '와 같이 색상으로 구분된 가시성 클래스와 함께 hover 클래스가 사용됩니다. 가리키기:표시 ' 또는 ' 가리키기:보이지 않음 '. 이 블로그는 가시성 유틸리티로 호버 상태를 적용하는 절차를 설명했습니다.