CODEWITHSUNDEEP
htmlcsssiblings
g5wx
g5wx

Reputation: 720

How to affect all classes with the same name on hover

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, :)

Upvotes: 0

Views: 2302

Answers (1)

Shomz
Shomz

Reputation: 37711

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/

Upvotes: 2

Related Questions