title: Nested divs of same class, show child on hover
body: <p>I'm trying to show a hidden div on hover of its parent.<br>
  My issue is that there are nested divs of the same class, and when I hover an "inner" div, its parent is also hovered and both their hidden children are shown.<br>
  html:</p>
  
  <pre><code>&lt;div class="a_class"&gt;
      lorem ipsum
      &lt;div class="inner"&gt;
          &lt;a href=""&gt;hidden...&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="b_class"&gt;
          blahblah&lt;br /&gt;
          &lt;div class="a_class"&gt;
              &lt;div class="inner"&gt;
                  &lt;a href=""&gt;hidden...&lt;/a&gt;
              &lt;/div&gt;
              lorem ipsum
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.inner{display:none;}
  .a_class:hover &gt; .inner{display: block;}
  </code></pre>
  
  <p>fiddle: <a href="http://jsfiddle.net/Nb6tD/" rel="nofollow">http://jsfiddle.net/Nb6tD/</a>  </p>
  
  <p>In other words, i'm trying to achieve this: when i hover over the second .a_class, only the .inner under it should show up, not the .inner under the "parent" .a_class.</p>
  
  <p>Is it possible only with css?</p>
  
  <p>Thanks in advance</p>
  
  <p><strong>EDIT: the answer</strong><br>
  So, it appears it CAN'T be done with pure css, unless the html markup changes - which is not possible in my case.
  I wished for a css3-magic solution, but since there's no such option, i'm going javascript.  </p>
  
  <p>I accepted the most suitable solution though for future reference, for all out there that have the possibility of changing the html structure.</p>