3

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

任何帮助表示赞赏！

4

3 回答 3

4

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

于 2013-06-05T19:17:41.230 回答
1

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

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

IE10 将 rgba() 视为纯色。

于 2013-07-10T15:19:36.683 回答
1

还有一种可能性是使用内联 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，可在所有浏览器中使用

于 2015-08-19T12:14:18.227 回答