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 hàng trong Tailwind CSS.
Cách áp dụng Di chuột trên lưới hàng trong Tailwind?
Để áp dụng hiệu ứng di chuột trên lưới hàng 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-hàng-
Kiểm tra các bước được cung cấp sẵn để triển khai thực tế:
Bước 1: Sử dụng Thuộc tính Hover Với Lưới Hàng 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-hàng-
< thân hình >
< div lớp học = 'lưới grid-row-3 hover: grid-row-5 grid-flow-col 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-hàng-3 ” chỉ định rằng lưới phải có 3 hàng có kích thước bằng nhau.
- “ di chuột: lưới-hàng-5 ” lớp thay đổi lưới thành 5 hàng có kích thước bằng nhau khi chuột di chuột qua nó.
- “ grid-flow-col ” lớp đặt các mục lưới theo chiều ngang trong các cột.
- “ 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
Để xác minh rằng hiệu ứng di chuột đã được áp dụng trên lưới hàng, hãy xem trang web và di chuyển chuột qua các mục lưới:
Có thể quan sát thấy rằng ban đầu có 3 hàng và khi di chuột qua nó, số lượng hàng đã thay đổi thành 5. Điều này cho thấy rằng hiệu ứng di chuột đã được áp dụng thành công trên lưới hàng.
Phần kết luận
Để áp dụng hiệu ứng di chuột trên lưới hàng trong Tailwind, hãy sử dụng “ bay lượn ” lớp học với “ lưới-hàng-
” tiện ích trong chương trình HTML. Nó thay đổi số lượng hàng 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 đã minh họa phương pháp áp dụng hiệu ứng di chuột trên lưới hàng trong Tailwind CSS.