Css IE10悬停伪类不'；没有背景色就不能工作

我在画布标记上有一个div

position:absolute

。div使用hover伪类设置

overflow:visible

以创建简单的弹出式效果。在Chrome中，这可以很好地工作。在IE10中，仅当我将鼠标悬停在div中的某个元素上，或者如果我给div一个

背景色时，才会激活hover伪类

感谢您的帮助
 看起来这可以通过使用透明png作为背景图像来解决

编辑：对不起，我应该进一步扩展。在ie中，如果在具有透明背景色的元素上使用伪类
：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>


#内容{
高度：20px；
溢出：隐藏；
位置：绝对位置；
宽度：100px；
}
#内容：悬停{
高度：100px；
溢出：可见；
}
#悬停内容{
位置：绝对位置；
顶部：20px；
}
世界跆拳道联盟
人力资源管理
英雄联盟

在ie中，如果将鼠标悬停在
#content
上，则只有当鼠标悬停在“wtf”或“hrm”上时，溢出内容才会可见。如果您将鼠标悬停在单词“wtf”和“hrm”之间，您可能希望也会应用鼠标悬停样式，因为这是
#content
的一部分，但您可能错了

要解决此问题，您可以将背景色或图像应用于
#content
更好的解决方案是使用透明背景色，而不是图像：

背景：rgba（0,0,0,0）

IE10将rgba（）视为纯色。
还有一种可能性是使用内嵌svg作为背景img。您只需要背景为1x1的svg元素-无颜色


优点-无需额外请求
Cons-IE8不支持svg

background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%221%22+height%3D%221%22+viewBox%3D%220+0+1+1%22%3E%3Ctitle%3Etransparent+bcg%3C%2Ftitle%3E%3C%2Fsvg%3E");
background-repeat: repeat;



示例已经编码为svg，可以在所有浏览器中使用
显示您使用的完整css类和html元素。您可以对您的答案进行一点扩展吗？很高兴知道您已经解决了您的问题，但这对解决问题的下一个用户应该是有帮助的，因此添加额外的细节以使其更易于理解/实现将是有帮助的。这究竟是一个比透明PNG更好的解决方案吗？不支持
rgba（）
（如IE8和更早版本）的旧浏览器将显示为不透明。透明的PNG应该在所有情况下都能工作。因为不是所有网站都需要支持IE8，而且当你发送额外请求获取它时，透明的PNG会使用更多的服务器资源。我怀疑许多为桌面浏览器开发的人会发现他们自己处于这样一种情况，即通过消除单一的