title: CSS :hover selects the wrong element in IE8
body: <p>So here's something I have to get to work in IE8 without the use of jQuery. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;area id="clickable-area" alt="" title="" href="#" shape="rect" coords="183,284,224,322" style="outline:none;" target="_self" class="hover" /&gt;
  &lt;p id="text-hover"&gt;Text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wrapper #text-hover {
    position:absolute;
    color: #ecbf96;
    top:30px;
    left:30px;
    visibility:hidden;
  }
  
  #wrapper:hover #text-hover { //:hover selects #wrapper in every
    visibility:visible;          //browser other than IE, where it ends
  }                            //up selecting #text-hover instead
  </code></pre>
  
  <p>Any ideas what might cause this behaviour in IE8 and how to get around it?</p>