이 문서에서는 Tailwind CSS에서 호버에 'break-inside'를 적용하는 방법을 예시합니다.
Tailwind에서 호버에 '내부 침입'을 적용하는 방법은 무엇입니까?
Tailwind에서 호버에 '내부 침입'을 적용하려면 HTML 프로그램의 원하는 요소에 특정 '내부 침입' 유틸리티와 함께 'hover' 속성을 사용하십시오. 그런 다음 확인을 위해 웹 페이지를 봅니다.
실제 데모를 위해 아래 나열된 단계를 시도하십시오.
1단계: 'break-inside' 유틸리티와 함께 Hover 속성 사용
HTML 프로그램을 만들고 ' 호버링 ” 속성을 원하는 '내부 침입' 유틸리티와 함께 사용하십시오. 예를 들어, 우리는 ' break-inside-avoid-column ” 호버의
요소 내에서 열 나누기를 방지하는 유틸리티:
< 몸 >
< 사업부 수업 = '열-2 bg-노란색-500' >
< 피 > 안녕하세요. 잘 왔어.... < / 피 >
< 피 수업 = 'hover:break-inside-avoid-column' >
내부 침입 유틸리티를 사용하여
페이지 또는 열 나누기는 요소 내에서 작동해야 합니다... < / 피 >
< 피 > Tailwind CSS에 대해 알아보기... < / 피 >
< 피 > 안녕... < / 피 >
< / 사업부 >
< / 몸 >
여기:
- “ 열-2 ” 클래스는 를 두 개의 열로 나누는 데 사용됩니다.
- “ bg-옐로우-500 ” 클래스는
의 배경색을 노란색으로 설정합니다.- “ hover:break-inside-avoid-column
요소의 ” 클래스는 마우스 포인터가 위에 있을 때
요소 내에서 열 나누기를 피해야 함을 나타냅니다.
2단계: 출력 확인
호버에서 'break-inside-avoid-column' 유틸리티가 성공적으로 적용되었는지 확인하려면 HTML 웹 페이지를 보십시오.
위의 출력은 사용자가 원하는 요소 위로 마우스를 가져갔을 때 요소 내의 열 나누기가 방지되었음을 보여줍니다. 이는 'break-inside-avoid-column'이 지정된 항목에 따라 호버 요소에 성공적으로 적용되었음을 나타냅니다.
결론
Tailwind에서 호버에 '내부 침입'을 적용하려면 ' 호버링 ” 속성이 원하는 “ 침입자 ” HTML 프로그램의 유틸리티. hover 속성은 모든 요소와 함께 사용할 수 있습니다. 확인을 위해 웹 페이지를 봅니다. 이 글은 Tailwind CSS에서 hover에 'break-inside'를 적용하는 방법을 설명했습니다.
- “ bg-옐로우-500 ” 클래스는