Affecting div:hover with another div [duplicate]

This question already has answers here: How to affect other elements when one element is hovered (9 answers) Closed 7 years ago.

I'm making a gallery where when you hover over th开发者_如何学编程e main image, the thumbnails should become transparent. I would like to achieve this with pure CSS, but I'm not sure if that's possible.

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>

Is this possible using pure CSS?

---

Sure, just use the adjacent sibling selector:

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

An example here: http://jsfiddle.net/6BfR6/94/

---

Only children of a selector can be affected. Otherwise, you'll need to use javascript.

For instance:

div:hover #childDiv {
  background: green;
}

---

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

it works fine in IE 7, 8, 9 and 10. No need to any JS or onovermouse and NOT ONLY children of a selector can be affected.

Try the example Link of "Nightfirecat".

---

even if it is, it will not work in IE :)

i would suggest using onmouseover event

however it is nice question and I am curious if someone has solution of doing it cross-browser via css

---

I think you're going to need some javascript for that.

---

No. You would have to use Javascript.