title: CSS Sibling Selector Alternative
body: <p>I'm trying to cause one element to change when another element is hovered. I know this can be done using the sibling selector (~) but it doesn't seem to be working. I tried to find an alternative to using the sibling selector but only found solutions in javascript which I don't know. </p>
  
  <p>I think the problem may come from the fact that I'm trying to tie multiple elements to one sibling, that is to say, hovering over 3 different divs all change one div in three different ways. I don't think there's a mistake though I could be wrong, the code is here...</p>
  
  <p>CSS</p>
  
  <pre><code>#internalContainer {
  width:900px;
  height:400px;
  }
  #sectionLeft {
  float:left;
  height:400px;
  width:300px;
  }
  .leftInternal {
  height:100px;
  width:300px;
  text-align:right;
  }
  #titleA {
  font-size:11pt;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing:1px;
  position:relative;
  top:40%;
  transition:.2s
  }
  #sectionRight {
  float:left;
  width:568px;
  height:400px;
  margin-left:32px;
  background-color:#f2f2f2;
  }
  #titleA:hover {
  top:45%;
  transition:.2s
  }
  #titleA:hover ~ #sectionRight {
  background: #ccc;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="internalContainer"&gt;
  &lt;div id="sectionLeft"&gt;
  &lt;div class="leftInternal"&gt;&lt;div id="titleA"&gt;Title of One&lt;/div&gt;&lt;/div&gt;
  &lt;div class="leftInternal"&gt;&lt;div id="titleA"&gt;Title of Two&lt;/div&gt;&lt;/div&gt;
  &lt;div class="leftInternal"&gt;&lt;div id="titleA"&gt;Title of Three&lt;/div&gt;&lt;/div&gt;
  &lt;div class="leftInternal"&gt;&lt;div id="titleA"&gt;Title of Four&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="sectionRight"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xs7h8/" rel="nofollow">http://jsfiddle.net/xs7h8/</a></p>
  
  <p>Currently nothing changes when the links are hovered but they're all set to do the same thing right now. I was going to make subclasses for titleA and connect each to the sectionRight but that didn't work either.</p>