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

Posted 2023-03-06

【中文标题】IE10 悬停伪类在没有背景颜色的情况下不起作用

【英文标题】：IE10 hover pseudo class doesn't work without background color

【发布时间】：2013-06-01 15:04:00

【问题描述】：

我在画布标签上有一个 div position:absolute。 div使用hover伪类设置overflow:visible，创建简单的弹窗式效果。在 Chrome 中，这可以正常工作。在 IE10 中，hover 伪类仅在我将鼠标悬停在 div 内的元素上或我给 div 一个 background-color 时才会激活。

感谢任何帮助！

【问题讨论】：

显示您使用的完整 css 类和 html 元素。

【参考方案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。

【讨论】：

你能稍微扩展一下你的答案吗？很高兴知道您已经解决了您的问题，但是由于这对下一个遇到您的问题的用户会有所帮助，因此添加更多详细信息以使其更易于理解/实施会很有帮助。

【参考方案2】：

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

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

IE10 将 rgba() 视为纯色。

【讨论】：

这究竟是如何比透明 PNG 更好的解决方案？不支持 rgba() 的旧版浏览器（如 IE8 和更早版本）会将其显示为不透明。透明的 PNG 应该适用于所有情况。

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

我怀疑许多为桌面浏览器开发的人会发现自己处于这样一种情况：消除单个

【参考方案3】：

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

优点 - 无需额外请求

缺点 - 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，可以在所有浏览器中使用