Bài viết này sẽ trình bày quy trình áp dụng di chuột với trang trí hộp trong Tailwind.
Làm cách nào để áp dụng Điểm ngắt trang trí khi di chuột trên hộp trong Tailwind?
Thuộc tính CSS “box-decoration-break” xác định việc hiển thị nền, đường viền và phần đệm cho một phần tử khi phần tử đó trải rộng trên nhiều dòng hoặc cột. Để áp dụng hiệu ứng di chuột trên các phần tử ngắt trang trí hộp, bắt buộc phải sử dụng “ bay lượn ” thuộc tính và áp dụng bất kỳ hiệu ứng nào cho các phần tử.
Kiểm tra các bước được cung cấp dưới đây để có một minh chứng thực tế:
Bước 1: Sử dụng Thuộc tính Hover trên Hộp trang trí Break trong Chương trình HTML
Tạo một chương trình HTML và sử dụng bất kỳ thuộc tính di chuột nào trên các phần tử ngắt trang trí hộp. Chẳng hạn, chúng tôi đã áp dụng một “ di chuột: hộp-trang trí-clone ” trên phần tử “box decoration-slice” và một “ di chuột: văn bản-vàng-500 ” trên phần tử “box-decoration-clone”:
< thân hình >
< nhịp lớp học = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < anh / >
Gợi ý
< / nhịp >
< anh >
< anh >
< nhịp lớp học = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < anh / >
Gợi ý
< / nhịp >
< / thân hình >
Đây:
- Các ' di chuột: hộp-trang trí-clone ” áp dụng hiệu ứng “box-decoration-clone” khi phần tử “box decoration-slice” được di chuột qua.
- Các ' di chuột: văn bản-vàng-500 ” thay đổi màu văn bản thành màu vàng khi phần tử “box-decoration-clone” được di chuột qua.
Bước 2: Xác minh đầu ra
Chạy chương trình HTML để xác minh đầu ra:
Đầu ra ở trên cho thấy hiệu ứng di chuột đã được áp dụng cho các thành phần theo đó nó được chỉ định.
Phần kết luận
Tailwind CSS cung cấp một tập hợp các lớp tiện ích để áp dụng hiệu ứng di chuột cho bất kỳ phần tử nào. Để áp dụng di chuột trên các phần tử ngắt trang trí hộp, hãy sử dụng “ bay lượn ” và chỉ định hiệu ứng trong chương trình HTML. Người dùng có thể thay đổi màu nền, màu văn bản và màu đường viền hoặc thêm bóng cho một phần tử khi di chuột. Bài viết này đã giải thích quy trình áp dụng tính năng di chuột có trang trí hộp trong Tailwind.