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

【问题标题】：CSS :hover selects the wrong element in IE8CSS :hover 在 IE8 中选择了错误的元素
【发布时间】：2015-09-09 12:50:00
【问题描述】：

所以我必须在不使用 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>

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

任何想法可能会导致 IE8 中的这种行为以及如何解决它？

【问题讨论】：

你能为此准备 JS Fiddle 吗？
选择错误的元素是什么意思？您的意思是您必须将鼠标悬停在 IE 中的 #text-hover 而不是 #wrapper 上？
stackoverflow.com/questions/3998917/… 类似问题，请尝试。
确保您正确声明了您的文档类型。
@AustinCollins 是的，这正是问题所在。

标签： html css internet-explorer internet-explorer-8 hover

【解决方案1】：

#text-hover 元素是绝对定位的。绝对定位的元素会从正常流程中移除。文档和其他元素的行为就像绝对定位的元素不存在一样。在这种情况下，#wrapper 元素的高度似乎是 0px，因此它实际上是不可见的。试试

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

或

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

【讨论】：