CSS :hover selects the wrong element in IE8

Question

So here's something I have to get to work in IE8 without the use of jQuery.

HTML

<div id="wrapper">
<area id="clickable-area" alt="" title="" href="#" shape="rect" coords="183,284,224,322" style="outline:none;" target="_self" class="hover" />
<p id="text-hover">Text</p>
</div>

CSS

#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

Any ideas what might cause this behaviour in IE8 and how to get around it?

Answer 1

#text-hover element is absolute positioned. Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. In this case it seems #wrapper element's height is 0px, so it is invisible actually. Try

#wrapper #text-hover{position: relative;}

OR

#wrapper{
    height: 20px; /* or some other value which is bigger than 0 */
}