Sử dụng: di chuột để sửa đổi css của một lớp khác?

Question

Có cách nào để sửa đổi css cho một lớp khi lơ lửng trên một phần tử từ một lớp khác chỉ bằng css không?

Cái gì như:

.item:hover .wrapper { /*some css*/ } 

Chỉ 'wrapper' không phải là bên trong 'mục', nó ở một nơi khác.

Tôi thực sự không muốn sử dụng javascript cho một cái gì đó đơn giản này, nhưng nếu tôi phải làm thế nào, tôi sẽ làm điều đó như thế nào? Đây là nỗ lực thất bại của tôi:

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";"; 

Chỉ có một thành phần của mỗi lớp. Không biết tại sao họ không sử dụng ID khi họ tạo mẫu, nhưng đó chỉ là cách thức và tôi không thể thay đổi nó.

[Chỉnh sửa]

Đó là menu. Mỗi phần tử menu có một lớp riêng biệt. Khi bạn di chuột lên phần tử, menu phụ bật lên bên phải. Nó giống như một lớp phủ, khi tôi sử dụng công cụ 'Kiểm tra Yếu tố', tôi có thể thấy rằng toàn bộ trang web html thay đổi khi menu phụ đang hoạt động (có nghĩa là không có gì ngoài menu con). Lớp tôi gọi là 'wrapper' có css điều khiển nền cho menu phụ. Có thực sự không có kết nối mà tôi có thể nhìn thấy giữa hai lớp học.

Answer 1

Hiện không thể có trong CSS, trừ khi bạn muốn chọn phần tử con hoặc anh chị em (tầm thường và được mô tả trong các câu trả lời khác tại đây).

Đối với tất cả các trường hợp khác, bạn cần JavaScript. jQuery và các khung công tác như Angular có thể giải quyết vấn đề này một cách dễ dàng.

[Chỉnh sửa]

Với CSS (4) chọn :has() mới, bạn sẽ có thể nhắm mục tiêu các yếu tố phụ huynh/lớp học, thực hiện một giải pháp CSS-Only khả thi trong tương lai gần!

Answer 2

Cung cấp .wrapper là bên trong .item và với điều kiện bạn không ở trong IE 6 hoặc .item là một thẻ, CSS bạn phải làm việc tốt. Bạn có bằng chứng để đề xuất nó không?

CHỈNH SỬA:

Chỉ riêng CSS không thể ảnh hưởng đến nội dung không có trong đó. Để thực hiện điều này, định dạng thực đơn của bạn như sau:

<ul class="menu"> 
    <li class="menuitem"> 
     <a href="destination">menu text</a> 
     <ul class="menu"> 
      <li class="menuitem"> 
       <a href="destination">part of pull-out menu</a> 
... etc ... 

và CSS của bạn như thế này:

.menu .menu { 
    display: none; 
} 

.menu .menuitem:hover .menu { 
    display: block; 
    float: left; 
    // likely need to set top & left 
} 

Answer 3

Có hai phương pháp bạn có thể mất, có một yếu tố dao động ảnh hưởng (E) yếu tố khác (F):

1. F là một phần tử con của E, hoặc
2. F là một sau-sibling (hoặc hậu duệ của ACE) yếu tố E (trong đó E xuất hiện trong mark-up/DOM trướcF):

Để minh họa đầu tiên trong số các tùy chọn này (F như một hậu duệ/con của E):

.item:hover .wrapper { 
    color: #fff; 
    background-color: #000; 
}​ 

Để chứng minh sự lựa chọn thứ hai, F là một yếu tố anh chị em ruột của E:

.item:hover ~ .wrapper { 
    color: #fff; 
    background-color: #000; 
}​ 

Trong ví dụ này, nếu .wrapper là anh chị em ngay lập tức của .item (không có yếu tố nào khác giữa hai), bạn cũng có thể sử dụng .item:hover + .wrapper.

JS Fiddle demonstration.

Tài liệu tham khảo:

• CSS 2.1 selectors, at the W3.org.

Answer 4

Bạn có thể làm điều đó bằng cách tạo CSS sau. bạn có thể đặt ở đây css bạn cần phải ảnh hưởng đến lớp trẻ trong trường hợp di chuột vào thư mục gốc

.root:hover .child { 
 
    
 
}