css - IE10悬停伪类没有背景色不起作用

Question

我在 canvas 标签上有一个 div position:absolute。 div 使用 hover 伪类设置 overflow:visible 来创建一个简单的弹出式效果。在 Chrome 中，这工作正常。在 IE10 中，悬停伪类仅在我将鼠标悬停在 div 中的元素上或者如果我为 div 提供 background-color 时才会激活。

感谢任何帮助!

Answer 1

看起来这可以通过使用透明的 png 作为背景图像来解决。

编辑:抱歉，应该对此进行更多扩展。也就是说，如果您在具有透明背景色的元素上使用伪类:hover，则仅当鼠标悬停在实心/非透明点上时才会触发悬停。这通常不是问题，除非您正在做这样的事情:

<style>
#content {
  height:20px;
  overflow:hidden;
  position:absolute;
  width:100px;
}
#content:hover {
  height:100px;
  overflow:visible;
}
#hoverContent {
  position:absolute;
  top:20px;
}
</style>
<div id="content">
    <div style="float:left;">wtf</div>
    <div style="float:right;">hrm</div>
    <div id="hoverContent">lol</div>
</div>

也就是说，如果您将鼠标悬停在#content 上，只有当鼠标悬停在'wtf' 或'hrm' 上时溢出的内容才会可见。如果您将鼠标悬停在“wtf”和“hrm”之间，您会期望悬停样式也会应用，因为那是 #content 的一部分，但您错了。

要解决此问题，您可以将背景颜色或图像应用于 #content。