0

I'm trying to figure out how to affect surrounding elements which have the same class name. My elements with the same class are stacked side by side within a parent div and then they continue within another child div. Is it possible to affect all of the same class divs on hover so that the hovered element has a opacity: 1 and others 0.5?

My selector looks like that below, but it only affects divs within same level and only the ones after the hovered element (I would like affect all of them):

icon:hover ~ .icon {
    opacity: 0.3;
}

For easier demo: Fiddle

Any suggestions appreciated, :)

Huangism
  • 16,278
  • 7
  • 48
  • 74
g5wx
  • 700
  • 1
  • 10
  • 30
  • you need to use js for it – Dev Man Jul 14 '14 at 17:31
  • Duplicate of http://stackoverflow.com/questions/1817792/css-previous-sibling-selector . Gist: there is no previous sibling selector and the `~` sibling selector only selects elements of the same parent. – Casey Falk Jul 14 '14 at 17:31
  • 1
    Not sure I totally understand. You mean like this http://jsfiddle.net/j08691/k2gXJ/2/? – j08691 Jul 14 '14 at 17:33
  • That seems to do what you want, no? – Casey Falk Jul 14 '14 at 17:35
  • @j08691 Exactly like this, just without paragraph affecting the .icon and if possible not to change opacity on main div hover, only when an .icon is hovered. – g5wx Jul 14 '14 at 17:35
  • 1
    @Casey Falk Yeah, i guess the only way to go is by selecting hover state on parent. Thanks for the link. – g5wx Jul 14 '14 at 17:40
  • @dd5, now I'm confused, I thought my answer was correct. Can you more accurately explain what exactly is the desired behaviour? – Shomz Jul 14 '14 at 17:44
  • Please see below. It's the closest one, but the hovering on paragraf also grey's out the .icon divs. – g5wx Jul 14 '14 at 17:45
  • That's easy to avoid - just pack the icons under a same parent and leave the paragraph out of it as its sibling. http://jsfiddle.net/k2gXJ/5/ – Shomz Jul 14 '14 at 17:49

1 Answers1

2

The problem is that the main container has sub-containers. The closest you can do with CSS is something like this: 

.main:hover > .icon {
    opacity: 0.3;
}

.main:hover .icon:hover {
    opacity: 1;
}

See here: http://jsfiddle.net/k2gXJ/3/ (the second line fails)

But, with a slight structure modification, you can achieve exactly what you want. See here:

http://jsfiddle.net/k2gXJ/4/ (this features containers as siblings with the same class name (you can create a class just for this), not sure if your app can do it, of course)

UPDATE

New example with icons grouped so that the paragraph doesn't affect anything: http://jsfiddle.net/k2gXJ/5/

Shomz
  • 37,421
  • 4
  • 57
  • 85
  • The other possible problem is with other non-icon content within the `.main`. Hovering on that will gray out all `.icon`s – James Montagne Jul 14 '14 at 17:41
  • Exactly. I can't change the markup, so i'm looking for a css solution, but I'm guessing this will not be possible. Shomz thanks for the answer anyway :) – g5wx Jul 14 '14 at 17:43
  • Yeah, if you can't change the markup, I'm 99% sure it's not possible. You're welcome, I hope this at least helped you a bit. – Shomz Jul 14 '14 at 17:51
  • Yeah, it's a good starting point and if i can get access to html it will be perfect solution, thanks. – g5wx Jul 14 '14 at 17:53
  • Great, the biggest issue here are those containers, because the way they function makes it obvious they need to be parallel, especially if there is going to be more of them. – Shomz Jul 14 '14 at 18:10
  • I've changed the markup and used your solution, thanks shomz :) – g5wx Jul 16 '14 at 18:57
  • Great, I'm glad you were still able to change the markup and do it the right way. You're welcome! :) – Shomz Jul 16 '14 at 19:19