title: CSS3 hover on nested divs
body: <p>I have mutlilevel nested divs. Each div has a span in it.</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;AA&lt;/span&gt;
      &lt;div&gt;
          &lt;span&gt;BB&lt;/span&gt;
          &lt;div&gt;
              &lt;span&gt;CC&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I hover a div, the spans css should get another background. This works pretty well, as long as i hover the most outer div, containting the AA span.
  But the problem is, if i hover the middle div, containing the BB span, the outer div hovers as well. If i hover the CC span div all three spans get the background.</p>
  
  <p>What I want is, that only the one div which the mouse points at is hovered.
  I look preferably for a CSS solution, but jQUery would be great as well.</p>
  
  <p>Here is a simplified jsfiddle of the problem: <a href="http://jsfiddle.net/FufRg/" rel="nofollow">http://jsfiddle.net/FufRg/</a></p>