title: Calling <div>s in :hover selector
body: <p>I'd like to affect multiple divs on a single <code>:hover</code>.  For instance, two divs floated left and right of each other.  When a <code>:hover</code> statement over one of them is activated (or, probably over a parent <code>div</code>) I would like for both of them to change width, color, opacity, etc.</p>
  
  <pre><code>&lt;div id='maincontainer'&gt;
      &lt;div id='mainleft'&gt;
       Left div that shrinks on maincontainer:hover
      &lt;/div&gt;
      &lt;div id='mainright'&gt;
      Right div that grows on maincontainer:hover
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Do I need a container div for this?  Is this even possible in CSS alone? </p>