Có một lớp giả CSS đối lập với: hover không?

Có lớp giả nào trong CSS để chỉ định không

:not(:hover)

Hay đó là cách duy nhất để chỉ định một mục không được di chuột?

Tôi đã xem qua một số tài liệu tham khảo CSS3 và tôi không thấy đề cập đến lớp giả CSS để chỉ định ngược lại với: hover.

Có, sử dụng :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin demo

Một vi dụ khac; Tôi nghĩ bạn muốn: "khi một cái được di chuột, làm mờ tất cả các phần tử khác" .

Nếu giả định của tôi là đúng và giả sử tất cả các bộ chọn của bạn nằm trong cùng một nguồn gốc:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Nếu không ... chỉ cần sử dụng logic mặc định:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

Không có một lớp học giả như vậy. Không cần phải có, khi bạn có thể sử dụng :not(:hover). Toàn bộ điểm của lớp :not()giả là cho phép tác giả viết các phủ định mà không cần phải chỉ định các phủ định riêng biệt của mọi lớp giả động hiện có (và trong tương lai) trong đó một phần tử chỉ có thể khớp hoặc không khớp với lớp giả.

Ví dụ, chỉ một số phần tử có thể là :enabledhoặc :disabled- hầu hết các phần tử đều không phải vì ngữ nghĩa đơn giản là không áp dụng - nhưng một phần tử chỉ có thể được chỉ định bởi thiết bị trỏ ( :hover) hoặc không ( :not(:hover)). Việc cung cấp các phủ định có thể đạt được trực tiếp bằng cách sử dụng :not()sẽ làm giảm đáng kể tính hữu dụng của nó (mặc dù nó vẫn có thể được sử dụng để phủ định bất kỳ bộ chọn đơn giản nào khác - hoặc toàn bộ bộ chọn phức tạp ).

Lập luận rằng một lớp giả như vậy sẽ ít tốn kém hơn về mặt tính toán là khá yếu. Việc triển khai ngây thơ nhất của một lớp giả như vậy sẽ là một :not(:hover)kiểm tra theo nghĩa đen , sẽ không thể tốt hơn. Bất kỳ triển khai phức tạp hơn hoặc được tối ưu hóa nào và bạn đang yêu cầu các nhà cung cấp triển khai một lớp giả nhanh bằng hoặc thậm chí nhanh hơn :not(:hover), một cái gì đó đã đủ phổ biến cho một trường hợp sử dụng khi xem xét các tùy chọn khác mà bạn có như xếp tầng và :not(:hover)(cho bất cứ khi nào xếp tầng không phải là một tùy chọn) mà bạn dễ dàng có quyền truy cập. Nó chỉ đơn giản là không biện minh cho thời gian và nỗ lực để chỉ định, thực hiện và thử nghiệm một phương pháp thay thế cho ít nhất một phương pháp hiện có khác tương đương 100% về chức năng (và một phương pháp áp dụng cho ít nhất80% các kịch bản). Và cũng có vấn đề về việc đặt tên cho một lớp giả như vậy - bạn chưa đề xuất tên cho nó và tôi cũng không thể nghĩ ra một cái hay. :not-hoverchỉ ngắn hơn hai byte và chỉ cần nhập ít hơn một chút. Nếu bất cứ điều gì, nó có khả năng nhiều hơn khó hiểu hơn :not(:hover).

Nếu bạn đang lo lắng về độ đặc hiệu, lưu ý rằng các :not()pseudo-class bản thân không được tính cho đặc hiệu; chỉ đối số cụ thể nhất của nó là . :not(:hover)và :hoverđều cụ thể như nhau. Vì vậy, tính cụ thể cũng không phải là một vấn đề.

Nếu bạn lo lắng về việc hỗ trợ trình duyệt, một lớp giả như vậy, nếu được giới thiệu, có thể sẽ được giới thiệu cùng với :not()hoặc ở cấp Bộ chọn sau đó, vì nó không xuất hiện trong CSS2 (nơi :hoverđược giới thiệu lần đầu tiên hơn 17 năm trước đây, và lần đầu tiên được triển khai trong IE4 một năm trước đó). Việc giới thiệu nó ở cấp độ sau sẽ là vô nghĩa vì các tác giả đơn giản sẽ bị buộc phải tiếp tục sử dụng :not(:hover)cho đến khi các trình duyệt bắt đầu triển khai lớp giả mới này và họ sẽ không có lý do gì để chuyển đổi.

Lưu ý rằng câu hỏi này không giống với câu hỏi sau, câu hỏi này nói về sự kiện và trạng thái (ban đầu :focuslà về sự kiện chứ không phải là :hover, nhưng áp dụng nguyên tắc tương tự): CSS có: bộ chọn làm mờ (lớp giả) không?

Nếu bạn chỉ muốn hiển thị thứ gì đó khi di chuột vào thứ khác, bạn có thể sử dụng

selector:not(:hover)

như thế này:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

Có một số tác dụng và kết quả bất thường khi sử dụng :not()mà bạn cần lưu ý:

• :not(:not(...)), :not(p::before)không thể
• :not(*) rõ ràng sẽ không bao giờ được áp dụng
• :not(.foo)sẽ khớp với bất kỳ thứ gì không có .foo, bao gồm các thẻ như <HTML>và<body>
• làm tăng tính cụ thể của quy tắc, ví dụ: ex: #foo:not(#bar)sẽ khớp với cùng một phần tử đơn giản hơn #foo, nhưng có độ cụ thể cao hơn.

andhoạt động với :not:

• Các phần tử không phải <div>và không phải là <span>phần tử: body :not(div):not(span){}

orhoạt động với :not, điều này chưa được hỗ trợ tốt.

• Các phần tử không .crazyhoặc .fancy:body :not(.crazy, .fancy){}

Nguồn MDN

a {
  /*styles*/
} 

là một liên kết bình thường (liên kết không di chuột qua)

a:hover {
  /*styles*/
} 

là một liên kết được di chuột qua