8

I'm making a gallery where when you hover over the 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?

JacobTheDev
  • 17,318
  • 25
  • 95
  • 158

6 Answers6

14

Sure, just use the adjacent sibling selector:

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

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

Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
  • 2
    +1 amazing... did not even know this existed! http://meyerweb.com/eric/articles/webrev/200007a.html – samccone Aug 15 '11 at 19:32
  • Wow! Thanks! That's absolutely perfect! Just like the guy above me, I had no idea that existed. Perfect. – JacobTheDev Aug 15 '11 at 19:34
  • +1 I had no idea you could do this without Javascript. – Peter Olson Aug 15 '11 at 19:34
  • +1 Everyone who didn't know about this... prepare to be dazzled! :-) http://www.w3.org/TR/css3-selectors/#selectors – andyb Aug 15 '11 at 19:38
  • @andyb: It's listed there, though it's not a CSS3 selector - it's in the completed CSS 2.1 specification: http://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html#adjacent-selectors – Nightfirecat Aug 15 '11 at 19:40
  • 1
    @Nightfirecat, yes I know it's a 2.1 selector. I just wanted to show the _current_ full spec of selectors :-) – andyb Aug 15 '11 at 19:51
  • 1
    You can use the even more general `~` selector, and you can even target elements that appear to be *before* the hovered one in the DOM. See my [pure-CSS signal bar rating widget answer](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900). – Dan Dascalescu Sep 09 '15 at 04:37
0

#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".

dsgsd
  • 1
  • 1
0

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

For instance:

div:hover #childDiv {
  background: green;
}
Trevor
  • 11,269
  • 2
  • 33
  • 40
-1

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

mkk
  • 7,583
  • 7
  • 46
  • 62
  • It doesn't need to work in IE, I already know how to write the fallback, but I don't think I'm going to bother with that. It's more of a personal site. – JacobTheDev Aug 15 '11 at 19:34
  • @rev: see solution provided by Nightfirecat. It is amazing and it works in IE 7 & 8 - i have tested – mkk Aug 15 '11 at 19:40
  • You can do this with CSS alone. See my [pure-CSS signal bar rating widget answer](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900), which shows you can alter the styling of elements that even (appear to) show up in the DOM *before* the hovered one. – Dan Dascalescu Sep 09 '15 at 04:36
-1

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

Jeremy Holovacs
  • 22,480
  • 33
  • 117
  • 254
  • You can do this with CSS alone. See my [pure-CSS signal bar rating widget answer](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900), which shows you can alter the styling of elements that even (appear to) show up in the DOM *before* the hovered one. – Dan Dascalescu Sep 09 '15 at 04:35
  • seriously? Downvoting after 4 years? – Jeremy Holovacs Sep 09 '15 at 18:50
  • It's as wrong now as it was back then. I just stumbled over the answer yesterday. I'm not a moderator who might read answers as they're posted; just a random user who landed here from a web search. – Dan Dascalescu Sep 09 '15 at 20:37
  • There's a clearly accepted answer from 4 years ago, but you decided to go on a crusade to downvote other answers? You seriously need a better hobby. – Jeremy Holovacs Sep 10 '15 at 11:18
-1

No. You would have to use Javascript.

John Stimac
  • 5,335
  • 8
  • 40
  • 60
  • You can do this with CSS alone. See my [pure-CSS signal bar rating widget answer](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900), which shows you can alter the styling of elements that even (appear to) show up in the DOM *before* the hovered one. – Dan Dascalescu Sep 09 '15 at 04:35