title: :hover on an element to change another?
body: <p>I have this bar chart and I would like to change the "test div" to a different background-color and the content itself when I'm hovering a specific bar.</p>
  
  <p>I have a bit trouble trying to make an element:hover change another element. </p>
  
  <p>I know there are many similar questions about this topic, but none of them seems to do the trick for me.</p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;div class="the-container"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a class="html" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="css" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="photoshop" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="illustrator" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="javascript" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="test"&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>.the-container { width:300px; height:250px; background-color:#EEE; }
  
  .the-container ul { margin:0; padding:0; list-style:none; }
  
  .the-container li { width:40px; height:250px; margin:0 10px; position:relative; float:left;}
  
  .the-container li a { position:absolute; bottom:0; width:100%; height:0; background-color:#ccc; border-top-left-radius: 5px; border-top-right-radius: 5px;}
  
  .the-container li a.html:hover { background-color:#111; }
  .the-container li a.css:hover { background-color:#ef3ef3; }
  .the-container li a.photoshop:hover { background-color:#be3be3; }
  .the-container li a.illustrator:hover { background-color:#cd3cd3; }
  .the-container li a.javascript:hover { background-color:#888; }
  
  div.test{width:300px; height: 30px; background-color:#BBB; position: relative; clear:both; line-height:2; margin-top:-16px;}
  
  div.test p {text-align: center;}
  
  a.html:hover ~ div.test{background-color:yellow;}
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/hgLkT/" rel="nofollow">Demo</a></strong></p>
  
  <p>Any ideas?
  Much appreciated! </p>