Thay đổi kiểu của tất cả các phần tử khác khi một phần tử bị lơ lửng

Question

Giả sử tôi có một loạt các div ở cùng một mức DOM. Khi tôi di chuột qua một, tôi muốn tất cả những người khác thay đổi phong cách (ví dụ: giảm opacity hoặc thay đổi nền), trong khi một trong đó là hovered vẫn như cũ.

Tôi không thể sử dụng các bộ chọn + hoặc ~ vì tôi cần nó để chọn tất cả các anh chị em, không chỉ các anh chị em liền kề hoặc chỉ các anh chị em sau đây. Về cơ bản những gì tôi đang tìm kiếm là một "tất cả anh chị em nhưng một trong những điều này" chọn. Điều này có tồn tại không? Có cách nào để đạt được điều này mà không cần JavaScript?

Answer 1

Bí quyết là đặt bộ chọn giả chuột trên phần tử cha và sau đó tạo kiểu cho phù hợp. Dưới đây là những gì tôi đang đề cập đến:

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

Đây là một bản demo: http://jsfiddle.net/joshnh/FJAYk/

Answer 2

Ví dụ trên là rất tốt, nhưng nếu có chênh lệch giữa các div và bạn không muốn ảnh hưởng để kích hoạt khi di chuột qua vùng trống, không cần javascript.

Dưới đây là một cách giải quyết đơn giản:

chỉ cần thêm float:left-.child và chắc chắn rằng .parent có overflow:visible (nó nên được hiển thị theo mặc định).

Bằng cách này, .parent trở nên cao 0px (vì vậy không gian trống sẽ không kích hoạt hiệu ứng) nhưng di chuột qua .child sẽ kích hoạt cả kính :hover giả.