Làm cách nào để áp dụng tính năng “đột nhập” trên Hover trong Tailwind?

Bài viết này sẽ minh họa phương pháp áp dụng tính năng “đột nhập” khi di chuột trong Tailwind CSS.

Làm cách nào để áp dụng tính năng “đột nhập” trên Hover trong Tailwind?

Để áp dụng tính năng “đột nhập” khi di chuột trong Tailwind, hãy sử dụng thuộc tính “hover” với tiện ích “đột nhập” cụ thể trên các phần tử mong muốn trong chương trình HTML. Sau đó, xem trang web để xác minh.

Để minh họa thực tế, hãy thử các bước được liệt kê dưới đây:

Bước 1: Sử dụng Thuộc tính Hover Với Tiện ích “đột nhập”
Tạo một chương trình HTML và sử dụng “ bay lượn ” thuộc tính với tiện ích “đột nhập” mong muốn. Chẳng hạn, chúng tôi đã sử dụng thuộc tính hover với “ phá-bên-tránh-cột ” tiện ích để tránh ngắt cột trong phần tử

khi di chuột:

Đây:

• “ cột-2 ” được sử dụng để chia
  thành hai cột.
• “ bg-vàng-500 ” đặt màu vàng cho nền của
  .
• “ hover:break-inside-tránh-cột ” lớp trong phần tử

  chỉ ra rằng khi con trỏ chuột di chuyển qua, nên tránh ngắt cột trong phần tử

  .

Bước 2: Xác minh đầu ra
Để xác minh xem tiện ích “break-inside-avoid-column” đã được áp dụng thành công khi di chuột hay chưa, hãy xem trang web HTML:

Đầu ra ở trên cho thấy rằng khi người dùng di chuột qua phần tử mong muốn, việc ngắt cột trong phần tử đã tránh được. Điều này cho thấy rằng 'cột đột nhập bên trong' đã được áp dụng thành công cho phần tử khi di chuột theo nó được chỉ định.

Phần kết luận

Để áp dụng “đột nhập” khi di chuột trong Tailwind, hãy sử dụng “ bay lượn ” tài sản với mong muốn “ đột nhập ” tiện ích trong chương trình HTML. Thuộc tính hover có thể được sử dụng với bất kỳ phần tử nào. Để xác minh, hãy xem trang web. Bài viết này đã giải thích phương pháp áp dụng tính năng 'đột nhập' khi di chuột trong Tailwind CSS.