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