我有一个使用position:absolute
的div覆盖在canvas标签上。这个div使用hover伪类来设置overflow:visible
,以创建一个简单的弹出效果。在Chrome浏览器中,这可以正常工作。但在IE10中,只有当我悬停在div内的元素上或者给div添加了background-color
时,hover伪类才会被激活。
任何帮助将不胜感激!
我有一个使用position:absolute
的div覆盖在canvas标签上。这个div使用hover伪类来设置overflow:visible
,以创建一个简单的弹出效果。在Chrome浏览器中,这可以正常工作。但在IE10中,只有当我悬停在div内的元素上或者给div添加了background-color
时,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>
#content
上方,只有当鼠标悬停在'wtf'或'hrm'上时,溢出的内容才会可见。如果你将鼠标悬停在'wtf'和'hrm'之间,你期望悬停样式也会被应用,因为那是#content
的一部分,但你会错的。#content
应用背景颜色或图像。background:rgba(0,0,0,0);
IE10将rgba()视为纯色。rgba()
的旧浏览器(如IE8及更早版本)将其显示为不透明。透明PNG应该在所有情况下都能正常工作。 - EnnuiCons - 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格式