Html CSS:hover在IE8中选择了错误的元素

因此，在不使用jQuery的情况下，我必须在IE8中完成一些工作

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>

有什么想法可能导致IE8中出现这种行为以及如何避免这种行为吗？

文本悬停元素处于绝对位置。绝对定位的元件从正常流量中移除。文档和其他元素的行为就像绝对定位元素不存在一样。在本例中，似乎#wrapper元素的高度是0px，因此它实际上是不可见的。 试一试

或

---

你能准备好JS小提琴吗？你说选择错误的元素是什么意思？你的意思是你必须在IE中将鼠标悬停在“文本悬停”而不是“包装器”上吗？类似的问题，请尝试。确保您正确声明了doctype。@AustinCollins是的，这正是问题所在。

#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

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

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