IE10悬停伪类在没有背景颜色的情况下无法工作

Question

我有一个使用position:absolute的div覆盖在canvas标签上。这个div使用hover伪类来设置overflow:visible，以创建一个简单的弹出效果。在Chrome浏览器中，这可以正常工作。但在IE10中，只有当我悬停在div内的元素上或者给div添加了background-color时，hover伪类才会被激活。

任何帮助将不胜感激！

- tau

---

请展示您使用的完整CSS类和HTML元素。 - Dejan.S

Answer 1

看起来可以通过使用透明的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>

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

要解决这个问题，你可以给#content应用背景颜色或图像。

- tau

---

你能详细说明一下你的答案吗？知道你已经解决了问题是很好的，但是为了帮助下一个遇到同样问题的用户，添加更多细节以便于理解和实现会更有帮助。 - Joe

Answer 2

更好的解决方案是使用透明背景颜色而不是图片： background:rgba(0,0,0,0); IE10将rgba()视为纯色。

- Aaron Butacov

---

这个方案比透明PNG更好在哪里呢？不支持rgba()的旧浏览器（如IE8及更早版本）将其显示为不透明。透明PNG应该在所有情况下都能正常工作。 - Ennui

因为并非所有的网站都需要支持IE8，而且当您发送额外的请求来获取它时，透明png会使用更多的服务器资源。 - Aaron Butacov

我怀疑许多为桌面浏览器开发的人会发现，通过消除单个<1kb GET请求获得的性能提升比破坏超过10％的浏览器市场份额更重要的情况并不多见。我梦想有一天可以不再担心优雅降级的问题。 - Ennui

Answer 3

另外一种可能性是使用内联SVG作为背景图像。您只需要具有1x1背景的SVG元素-没有颜色。

• Pros - No need of additional request

• Cons - IE8 does not support 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格式

- Samuell