Bài viết này sẽ minh họa phương pháp áp dụng hiệu ứng di chuột trên tiện ích luồng tự động dạng lưới trong Tailwind CSS.
Cách áp dụng Hover on Grid Auto Flow trong Tailwind?
Để áp dụng hiệu ứng di chuột trên luồng tự động dạng lưới trong Tailwind, hãy tạo một tệp HTML và sử dụng “ bay lượn ” lớp học với “ grid-flow-
Xem xét 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 mong muốn “ grid-flow-
< thân hình >
< div lớp học = 'lưới grid-flow-col hover: grid-flow-row 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 >
< / thân hình >
Đây:
- “ lưới ” lớp đặt phần tử làm vùng chứa lưới.
- “ grid-flow-col ” xác định luồng các mục lưới trong các cột.
- “ di chuột: grid-flow-row ” lớp thay đổi luồng các mục lưới thành các hàng khi chuột di chuột qua vùng chứa.
- “ khoảng cách-3 ” thêm khoảng cách 3 đơn vị giữa các mục lưới.
- “ m-3 ” thêm lề 3 đơn vị xung quanh vùng chứa lưới.
- “ trung tâm văn bản ” căn chỉnh nội dung văn bản bên trong các mục lưới vào giữa.
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 luồng tự động của lưới, 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 luồng của các mục lưới nằm trong các cột và khi di chuột qua chúng, luồng được chuyển thành các hàng. Điều này cho biết rằng hiệu ứng di chuột được áp dụng thành công cho luồng tự động lưới.
Phần kết luận
Để áp dụng hiệu ứng di chuột trên luồng tự động dạng lưới trong Tailwind, hãy sử dụng “ bay lượn ” lớp học với mong muốn “ grid-flow-