Question

我在canvas标签上有一个div position:absolute。 div使用悬停伪类来设置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'字样悬停在BETWEEN之间，你会期望悬停样式也会被应用，因为它是#content的一部分，但你错了。

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

Answer 2

更好的解决方案是使用透明背景颜色而不是图像：

background:rgba(0,0,0,0);

IE10将rgba（）视为纯色。

Answer 3

另一种可能性是使用内联svg作为背景img。你只需要svg元素，背景为1x1 - 没有颜色。

优点 - 无需额外请求

缺点 - 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，适用于所有浏览器

IE10悬停伪类在没有背景颜色的情况下不起作用

3 个答案: