Question

I’d like to affect multiple divs on a single :hover. For instance, two divs floated left and right of each other. When a :hover statement over one of them is activated (or, probably over a parent div) I would like for both of them to change width, color, opacity, etc.

<div id='maincontainer'>
    <div id='mainleft'>
     Left div that shrinks on maincontainer:hover
    </div>
    <div id='mainright'>
    Right div that grows on maincontainer:hover
    </div>
</div>

Do I need a container div for this? Is this even possible in CSS alone?

Answer 1

simply use

#maincontainer:hover #mainleft { ... }
#maincontainer:hover #mainright { ... }

and change your css properly. This will work everywhere except IE<7 which allows hover only for <a> elements

You could also think to trigger a CSS transition on newer browser so the size of inner divs change gradually.