Ảnh hưởng đến div: di chuột với một div

Question

Tôi đang tạo một thư viện khi bạn di chuột qua hình ảnh chính, hình thu nhỏ sẽ trở nên trong suốt. Tôi muốn đạt được điều này với CSS tinh khiết, nhưng tôi không chắc liệu điều đó có thể xảy ra hay không.

CSS:

/* should affect thumbs but not main */ 
/* obviously this code wouldn't work */ 
#main:hover, #thumbs { 
    opacity: .5; 
} 

HTML:

<div id="main"> 
    Hover over me to change #thumbs 
</div> 
<div id="thumbs"> 
    I change when you hover over #main 
</div> 

Đây có phải là có thể sử dụng CSS tinh khiết?

Answer 1

Chắc chắn, chỉ cần sử dụng anh chị em chọn liền kề:

#div1:hover + #div2 { 
    ... 
} 

Một ví dụ ở đây: http://jsfiddle.net/6BfR6/94/

Answer 2

thậm chí nếu nó có, nó sẽ không làm việc trong IE :)

tôi sẽ đề nghị sử dụng sự kiện onmouseover

tuy nhiên nó là tốt đẹp câu hỏi và tôi tò mò nếu ai đó có giải pháp để làm việc đó qua trình duyệt qua css

Answer 3

Chỉ trẻ em của bộ chọn có thể bị ảnh hưởng. Nếu không, bạn sẽ cần phải sử dụng javascript.

Ví dụ:

div:hover #childDiv { 
    background: green; 
} 

Answer 4

Tôi nghĩ rằng bạn sẽ cần một số javascript cho điều đó.

Answer 5

No. Bạn sẽ phải sử dụng Javascript.

Answer 6

# div1: hover + # div2 { ... }

hoạt động tốt trong IE 7, 8, 9 và 10. Không cần JS hoặc onovermouse và KHÔNG CHỈ trẻ em của bộ chọn có thể bị ảnh hưởng.

Thử liên kết ví dụ về "Nightfirecat".