Hover và :focus together css
|
Tương tự như cách Tailwind xử lý thiết kế đáp ứng, bạn có thể hoàn thành các yếu tố kiểu dáng khi di chuột, lấy tiêu điểm, v.v. bằng cách thêm tiền tố vào các tiện ích với biến thể trạng thái phù hợp Show
Theo mặc định, không phải tất cả các biến thể trạng thái đều được bật cho tất cả các tiện ích do cân nhắc về kích thước tệp, nhưng chúng tôi đã cố gắng hết sức để bật các kết hợp được sử dụng phổ biến nhất ngay lập tức Để biết danh sách đầy đủ các biến thể nào được bật theo mặc định, hãy xem ở cuối trang này Nếu cần nhắm mục tiêu đến một trạng thái mà Tailwind không hỗ trợ, thì bạn có thể mở rộng các biến thể được hỗ trợ bằng cách Thêm tiền tố Theo mặc định, biến thể
Bạn có thể kiểm soát xem các biến thể Thêm tiền tố Theo mặc định, biến thể
Bạn có thể kiểm soát việc có bật biến thể Tích cựcThêm tiền tố Theo mặc định, biến thể Bạn có thể kiểm soát xem các biến thể Di chuột theo nhómNếu bạn cần tạo kiểu cho phần tử con khi di chuột qua phần tử cha cụ thể, hãy thêm lớp Dự án mới Tạo một dự án mới từ nhiều mẫu bắt đầu Theo mặc định, biến thể
Bạn có thể kiểm soát việc có bật biến thể Tập trung vào nhómBiến thể Theo mặc định, biến thể Bạn có thể kiểm soát xem các biến thể Tập trung vào bên trongThêm tiền tố Theo mặc định, biến thể
Bạn có thể kiểm soát xem các biến thể tiêu cự có thể nhìn thấyLưu ý rằng tiêu điểm có thể nhìn thấy hiện yêu cầu các polyfill JS và PostCSS để hỗ trợ đầy đủ cho trình duyệt Thêm tiền tố Đổ chuông khi lấy nét Đổ chuông khi lấy nét có thể nhìn thấy Lưu ý rằng hiện tại chỉ có Chrome, Edge và Firefox hỗ trợ Theo mặc định, biến thể Bạn có thể kiểm soát xem các biến thể chuyển động an toànThêm tiền tố Ví dụ: nút này sẽ chỉ hoạt hình khi di chuột nếu người dùng chưa bật "Giảm chuyển động" trên hệ thống của họ Lưu ý rằng không giống như hầu hết các biến thể khác, có thể kết hợp Theo mặc định, biến thể Bạn có thể kiểm soát việc có bật biến thể giảm chuyển độngThêm tiền tố Ví dụ: nút này sẽ hoạt ảnh khi di chuột theo mặc định, nhưng hoạt ảnh sẽ bị tắt nếu người dùng đã bật "Giảm chuyển động" trên hệ thống của họ Lưu ý rằng không giống như hầu hết các biến thể khác, có thể kết hợp Theo mặc định, biến thể Bạn có thể kiểm soát việc có bật biến thể Tàn tậtThêm tiền tố Theo mặc định, biến thể Bạn có thể kiểm soát việc có bật biến thể Đã truy cậpThêm tiền tố Theo mặc định, biến thể Bạn có thể kiểm soát xem các biến thể Đã kiểm traThêm tiền tố Theo mặc định, biến thể Bạn có thể kiểm soát việc có bật biến thể con đầu lòngThêm tiền tố Điều quan trọng cần lưu ý là bạn nên thêm bất kỳ tiện ích Theo mặc định, biến thể Bạn có thể kiểm soát xem các biến thể Con cuối cùngThêm tiền tố Điều quan trọng cần lưu ý là bạn nên thêm bất kỳ tiện ích Theo mặc định, biến thể Bạn có thể kiểm soát xem các biến thể con lẻThêm tiền tố Điều quan trọng cần lưu ý là bạn nên thêm bất kỳ tiện ích Theo mặc định, biến thể Bạn có thể kiểm soát xem các biến thể con chẵnThêm tiền tố Điều quan trọng cần lưu ý là bạn nên thêm bất kỳ tiện ích Theo mặc định, biến thể Bạn có thể kiểm soát xem các biến thể Kết hợp với tiền tố đáp ứngCác biến thể trạng thái cũng phản hồi nhanh, nghĩa là bạn có thể thực hiện những việc như thay đổi kiểu di chuột của một phần tử tại các điểm ngắt khác nhau chẳng hạn Để áp dụng một biến thể trạng thái tại một điểm dừng cụ thể, trước tiên hãy thêm tiền tố đáp ứng, trước tiền tố trạng thái Tạo các biến thể cho các tiện ích tùy chỉnhBạn có thể tạo các biến thể trạng thái cho các lớp CSS tùy chỉnh của riêng mình bằng cách gói chúng bằng chỉ thị Để biết thêm thông tin, hãy xem Tạo các biến thể tùy chỉnhBạn có thể tạo các biến thể của riêng mình cho bất kỳ trạng thái nào mà Tailwind không hỗ trợ theo mặc định bằng cách viết plugin biến thể tùy chỉnh Ví dụ: plugin đơn giản này thêm hỗ trợ cho biến thể lớp giả Tìm hiểu thêm về cách viết các plugin biến thể trong Tham chiếu biến thể mặc địnhDo cân nhắc về kích thước tệp, Tailwind không bao gồm tất cả các biến thể cho tất cả các tiện ích theo mặc định Để định cấu hình biến thể nào được bật cho dự án của bạn, hãy xem tài liệu cấu hình biến thể Việc sử dụng hover active và focus dynamic pseudo là gìCác lớp giả này thay đổi cách hiển thị các liên kết theo hành động của người dùng. . hover áp dụng khi người dùng đặt con trỏ lên phần tử nhưng không chọn phần tử đó. . hoạt động áp dụng khi phần tử được kích hoạt hoặc nhấp vào. . tiêu điểm áp dụng khi phần tử có tiêu điểm bàn phím .
Sự khác biệt giữa hoạt động và di chuột là gì?Di chuột. Đó là trạng thái xảy ra bằng cách đặt con trỏ của bạn lên nút. Bạn không thể thấy trạng thái này bằng bàn phím. Đang hoạt động. Rất đơn giản, đó là trạng thái của một phần tử đang hoạt động . Ví dụ, trong ví dụ của chúng tôi, đó là trạng thái tương tác với nút.
Tiêu điểm và hoạt động trong CSS là gì?:focus and :active are two different states. . tiêu điểm biểu thị trạng thái khi phần tử hiện được chọn để nhận đầu vào và . . active đại diện cho trạng thái khi phần tử hiện đang được người dùng kích hoạt .
Chúng ta có thể sử dụng di chuột với Div không?Để hiển thị phần tử div bằng CSS khi di chuột qua thẻ. Đầu tiên, đặt phần tử div ẩn i. màn hình điện tử. không ai;. Bằng cách sử dụng bộ chọn anh chị em liền kề và di chuột lên thẻ để hiển thị phần tử div . |
