이 문서에서는 Tailwind CSS의 열 그리드에 호버 효과를 적용하는 방법을 보여줍니다.
Tailwind에서 기둥 그리드에 호버를 적용하는 방법은 무엇입니까?
Tailwind의 열 그리드에 호버 효과를 적용하려면 HTML 파일을 만들고 ' 호버링 ' 클래스 ' grid-cols-<값> ” HTML 프로그램의 유틸리티. 마우스를 기둥 그리드 위로 가져가면 기둥 수가 변경됩니다. 그런 다음 웹 HTML 페이지를 보고 그리드 항목에 마우스를 올려 변경 사항을 확인합니다.
실제 구현을 위해 제공된 단계를 따르십시오.
1단계: HTML 프로그램에서 기둥 그리드와 함께 Hover 속성 사용
HTML 프로그램을 만들고 ' 호버링 ' 속성이 ' grid-cols-<값> ' 공익사업. 예를 들어 ' hover:grid-cols-5 ” 속성을 사용하여 호버의 열 수를 변경합니다.
< 몸 >
< 사업부 수업 = 'grid grid-cols-3 hover:grid-cols-5 gap-3 m-3 text-center' >
< 사업부 수업 = 'bg-teal-500 p-5' > 1 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 2 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 삼 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 4 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 5 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 6 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 7 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 8 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 9 < / 사업부 >
< 사업부 수업 = 'bg-teal-500 p-5' > 10 < / 사업부 >
< / 사업부 >
< / 몸 >
여기 부모
- “ 그리드 ” 클래스는 그리드 레이아웃을 만드는 데 사용됩니다.
- “ 그리드-cols-3 ” 클래스는 그리드에 동일한 크기의 열이 3개 있어야 함을 지정합니다.
- “ hover:grid-cols-5 ” 클래스는 마우스가 그리드 위에 있을 때 그리드가 5개의 동일한 크기 열로 변경되도록 지정합니다.
- “ 갭-3 ” 클래스는 각 그리드 항목 사이의 간격을 3 단위로 설정합니다.
- “ m-3 ” 클래스는 그리드 컨테이너 주변에 3단위의 여백을 적용합니다.
- “ 텍스트 센터 ” 클래스는 각 그리드 항목의 텍스트를 가운데로 설정합니다.
하위
- “ <사업부> ”는 그리드 항목의 수를 나타냅니다.
- “ bg-청록-500 ” 클래스는 청록색을 그리드 항목의 배경으로 설정합니다.
- “ p-5 ” 클래스는 자식 항목 내부의 콘텐츠에 5단위의 패딩을 추가합니다.
2단계: 출력 확인
호버 효과가 열 그리드에 적용되었는지 확인하려면 웹 페이지를 보고 그리드 항목 위로 마우스를 이동합니다.
그리드 항목 위에 마우스를 올리면 열의 수가 변경되는 것을 볼 수 있습니다. 기둥 그리드에 호버 효과가 성공적으로 적용되었음을 나타냅니다.
결론
Tailwind의 열 그리드에 호버 효과를 적용하려면 ' 호버링 ' 클래스 ' grid-cols-<값> ” HTML 프로그램의 유틸리티. 호버의 열 수를 변경합니다. 변경 사항을 확인하려면 웹 HTML 페이지를 보고 그리드 항목에 마우스를 올려 놓으십시오. 이 문서에서는 Tailwind CSS의 열 그리드에 호버 효과를 적용하는 방법을 설명했습니다.