title: Affecting various div classes when hovering over one single div class
body: <p>I'm trying to affect various div classes when hovering over one particular div class.</p>
  
  <p><a href="http://jsfiddle.net/r2R4Q/" rel="nofollow">Fiddle</a></p>
  
  <p>CSS</p>
  
  <pre><code>.left {float:left;}
  .middle {float:left;}
  .right {float:right;}
  
  .left, .middle, .right {width:33%; 
      height:40px; background-color:transparent;}
  
  .middle:hover {background-color:red;}
  
  .middle:hover ~ .right {background-color: green;}
  
  .text {display:none;}
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="left"&gt;
      &lt;/div&gt;
      &lt;div class="middle"&gt;
          &lt;a href="#"&gt;linked text&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
          &lt;span class="text"&gt;Here we have some text&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When hovering over the middle div class, the left, middle and right div classes all have to get different background colours. </p>
  
  <p>Besides that, the The div on the right also has text in it. This text needs to be hidden and should only show when the div in the middle is hovered on.</p>
  
  <p>So, to recap..</p>
  
  <p>On page load, the left, middle and right divs should have a transparent background and the div on the right should not have any text. When hovering the middle div, the 3 divs all get a different background color and the text in the right div should become visible. </p>
  
  <p>I'm trying to do this with pseudo-selectors, but I can only change the background color in the middle and right divs. I can't affect the left div and the text visibility does not work either.</p>
  
  <p>Any help would be appreciated.</p>