Bài viết này sẽ trình bày phương pháp áp dụng hiệu ứng di chuột trên lưới cột trong Tailwind CSS.
Cách áp dụng Di chuột trên lưới cột trong Tailwind?
Để áp dụng hiệu ứng di chuột trên lưới cột trong Tailwind, hãy tạo một tệp HTML và sử dụng “ bay lượn ” lớp học với “ lưới-cols-
Thực hiện theo các bước được cung cấp để triển khai thực tế:
Bước 1: Sử dụng Thuộc tính Hover Với Lưới Cột trong Chương trình HTML
Tạo một chương trình HTML và sử dụng “ bay lượn ” tài sản với “ lưới-cols-
< thân hình >
< div lớp học = 'lưới grid-cols-3 hover:grid-cols-5 gap-3 m-3 text-center' >
< div lớp học = 'bg-teal-500 p-5' > 1 < / div >
< div lớp học = 'bg-teal-500 p-5' > 2 < / div >
< div lớp học = 'bg-teal-500 p-5' > 3 < / div >
< div lớp học = 'bg-teal-500 p-5' > 4 < / div >
< div lớp học = 'bg-teal-500 p-5' > 5 < / div >
< div lớp học = 'bg-teal-500 p-5' > 6 < / div >
< div lớp học = 'bg-teal-500 p-5' > 7 < / div >
< div lớp học = 'bg-teal-500 p-5' > số 8 < / div >
< div lớp học = 'bg-teal-500 p-5' > 9 < / div >
< div lớp học = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / thân hình >
Ở đây, trong phần tử cha
- “ lưới ” lớp được sử dụng để tạo bố cục dạng lưới.
- “ lưới-cols-3 ” chỉ định rằng lưới phải có 3 cột có kích thước bằng nhau.
- “ di chuột: grid-cols-5 ” lớp chỉ định rằng lưới sẽ được thay đổi thành 5 cột có kích thước bằng nhau khi chuột di chuột qua nó.
- “ khoảng cách-3 ” lớp đặt khoảng cách 3 đơn vị giữa mỗi mục lưới.
- “ m-3 ” lớp áp dụng lề 3 đơn vị xung quanh vùng chứa lưới.
- “ trung tâm văn bản ” lớp đặt văn bản của từng mục lưới vào trung tâm.
Trong các phần tử
- “ ” đại diện cho số lượng mục lưới.
- “ bg-teal-500 ” đặt màu xanh mòng két cho nền của các mục lưới.
- “ p-5 ” lớp thêm phần đệm 5 đơn vị vào nội dung bên trong các mục
con.Bước 2: Xác minh đầu ra
Để đảm bảo hiệu ứng di chuột đã được áp dụng trên lưới cột, hãy xem trang web và di chuyển chuột qua các mục lưới:
Có thể thấy rằng khi di chuột qua mục lưới, số lượng cột sẽ thay đổi. Nó chỉ ra rằng hiệu ứng di chuột đã được áp dụng thành công trên lưới cột.
Phần kết luận
Để áp dụng hiệu ứng di chuột trên lưới cột trong Tailwind, hãy sử dụng “ bay lượn ” lớp học với “ lưới-cols-
” tiện ích trong chương trình HTML. Nó thay đổi số lượng cột khi di chuột. Để đảm bảo thay đổi, hãy xem trang HTML của web và di chuột trên các mục lưới. Bài viết này đã trình bày phương pháp áp dụng hiệu ứng di chuột trên lưới cột trong Tailwind CSS.