Làm cách nào để áp dụng hiệu ứng di chuột trên phần tử a, nhưng không áp dụng cho thành phần a với lớp active?: di chuột nhưng: không thuộc một lớp cụ thể
a:hover(not: .active)
Dường như có gì đó bị thiếu.
Ký hiệu chức năng là trên :not(), không :hover:
a:not(.active):hover
Nếu bạn muốn đặt :hover đầu tiên, đó là tốt:
a:hover:not(.active)
Nó không quan trọng mà pseudo-class đến trước hoặc cuối cùng; một trong hai cách, bộ chọn hoạt động giống nhau. Nó chỉ xảy ra là quy ước cá nhân của tôi để đặt :hover cuối cùng vì tôi có xu hướng đặt các lớp giả tương tác người dùng đằng sau các lớp giả cấu trúc.
Bạn có tùy chọn sử dụng công cụ chọn not().
a:not(.active):hover { ... }
Tuy nhiên, điều này có thể không hoạt động trên tất cả các trình duyệt, vì không phải tất cả các trình duyệt đều triển khai tính năng CSS3.
Nếu bạn đang nhắm mục tiêu đối tượng lớn và muốn hỗ trợ các trình duyệt cũ hơn, cách tốt nhất là xác định kiểu cho .active:hover và hoàn tác mọi thứ bạn đang thực hiện trong a:hover.
Ah, hoàn hảo! Cảm ơn bạn @BoltClock. – Michelle
Hãy cẩn thận nếu bạn cần hỗ trợ IE trước phiên bản 9 mặc dù chúng dường như không hỗ trợ 'not()' https://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses . Có lẽ xem câu trả lời của @Mendhak nếu bạn làm thế. – SharpC