Bài viết này đề cập đến quy trình triển khai để áp dụng trạng thái di chuột và các trạng thái khác có thuộc tính hiển thị bằng cách sử dụng Tailwind CSS.
Cách áp dụng Hover và các quốc gia khác bằng tiện ích hiển thị trong Tailwind?
Tiện ích khả năng hiển thị có thể được sử dụng dọc theo di chuột và các trạng thái khác để làm cho khả năng hiển thị thay đổi khi tương tác với người dùng. Có ba lớp trong tiện ích hiển thị cụ thể là “ dễ thấy ”, “ vô hình ', Và ' sụp đổ ”. Hãy tích hợp một số lớp khả năng hiển thị với trạng thái di chuột trong các ví dụ bên dưới để hiểu rõ hơn.
Ví dụ 1: Áp dụng trạng thái di chuột dọc theo lớp 'vô hình'
Trong trường hợp này, phần tử đã chọn sẽ bị ẩn khi con trỏ của người dùng di chuyển qua phần tử, mã được hiển thị bên dưới:
< thân hình >
< div lớp học = 'lưới grid-cols-3 gap-4 my-4 mx-4' >
< div lớp học = 'trung tâm văn bản tròn bg-blue-500 p-3' > 01 < / div >
< div lớp học = 'bg-blue-500 p-3 di chuột: vô hình trung tâm văn bản tròn' > 02 < / div >
< div lớp học = 'trung tâm văn bản tròn bg-blue-500 p-3' > 03 < / div >
< / div >
< / thân hình >
Giải thích đoạn mã trên:
- Đầu tiên, div gốc được tạo để tạo bố cục lưới ba cột có khoảng cách giữa mỗi cột và lề của “ 4px ”. Sử dụng CSS Tailwind “ lưới ”, “ lưới-cols-3 ”, “ khoảng cách ”, “ Của tôi ', Và ' mx ” các lớp tương ứng.
- Tiếp theo, ba đứa trẻ “ div ” các phần tử được tạo và kiểu dáng cơ bản được áp dụng cho chúng.
- Sau đó, “ bay lượn ” trạng thái hoặc bộ chọn trong CSS được gán cho “div” thứ hai và “ vô hình ” được gán cho nó được phân tách bằng dấu hai chấm “ : ' dấu hiệu. Điều này làm cho div thứ hai không nhìn thấy được khi con chuột di chuột qua nó.
Xem trước trang web sau giai đoạn thực thi:
Ảnh gif ở trên cho thấy div thứ hai đang ẩn đi khi di chuột.
Ví dụ 2: Áp dụng Active State Dọc theo Class “invisible”
Trạng thái “đang hoạt động” áp dụng các kiểu khi người dùng chọn một thành phần cụ thể và không rời đi. Cũng giống như các hộp văn bản khi người dùng bắt đầu nhập dữ liệu bên trong trường, lúc này trường đang hoạt động. Để hiểu rõ hơn về trạng thái hoạt động và cách nó hoạt động với lớp “vô hình”, hãy truy cập đoạn mã dưới đây:
< thân hình >< div lớp học = 'lưới grid-cols-3 gap-4 my-4 mx-4' >
< div lớp học = 'trung tâm văn bản tròn bg-blue-500 p-3' >01< / div >
< div lớp học = 'bg-blue-500 p-3 đang hoạt động:trung tâm văn bản được làm tròn vô hình' >02< / div >
< div lớp học = 'trung tâm văn bản tròn bg-blue-500 p-3' >03< / div >
< / div >
< / thân hình >
Trong đoạn mã trên, lớp “ vô hình ” được gán cho “ tích cực ” trạng thái thứ hai “ div ” để ẩn phần tử div thứ hai khi nó được chọn.
Sau khi thực hiện, bản xem trước của trang web xuất hiện như sau:
Đầu ra ở trên cho thấy rằng khi “div” thứ hai được chọn, phần tử sẽ trở nên vô hình.
Phần kết luận
Di chuột và các trạng thái khác như hoạt động hoặc tiêu điểm có thể được sử dụng với các lớp do tiện ích hiển thị cung cấp để sửa đổi các thuộc tính hiển thị cho các thành phần đã chọn. Để thay đổi khả năng hiển thị của các phần tử khi di chuột, lớp di chuột được sử dụng dọc theo các lớp khả năng hiển thị được phân tách bằng màu như “ di chuột: có thể nhìn thấy ' hoặc ' di chuột: vô hình ”. Blog này đã giải thích quy trình áp dụng trạng thái di chuột với tiện ích khả năng hiển thị.