各位复制下面代码，或者下载附件用IE打开就知道了，应用了filter之后 mouseover事件不能正常触发，不知道为什么。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.div{
border:1px solid #3165ac;
width:150px;
height:150px;
float:left;
margin:5px;
}
.div_text{
border:1px solid #3165ac;
width:50px;
height:50px;
float:left;
margin:5px;
}
.bgcolor{
background-color:#999;
}
.opacity40 {/*这个filter 在行内元素无效*/
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);/*#40000000 40表示透明度 不透明为FF 000000表示颜色，此为黑色*/
}
</style>
</head>
<body>
<div id="div_nofilter" class="div">
没有filter（正常触发mouseover）
</div>
<div id="div1" class="div_text"></div>
<div id="div_filter" class="div opacity40">
应用了filter(只在文字和边框触发mouseover)
</div>
<div id="div2" class="div_text opacity40"></div>
<div id="div_filter_bgcolor" class="div opacity40 bgcolor">
应用了filter和背景颜色(正常触发mouseover)
</div>
<div id="div3" class="div_text opacity40 bgcolor"></div>
<script type="text/javascript">
//当div_nofilter触发mouseover事件时 div2文本会自增1
document.getElementById("div_nofilter").onmouseover = function(){
var i = 1;
return function(){
document.getElementById("div1").innerHTML = i++;
}
}();
//当div_filter触发mouseover事件时 div1文本会自增1
document.getElementById("div_filter").onmouseover = function(){
var i = 1;
return function(){
document.getElementById("div2").innerHTML = i++;
}
}();
//当div_nofilter触发mouseover事件时 div2文本会自增1
document.getElementById("div_filter_bgcolor").onmouseover = function(){
var i = 1;
return function(){
document.getElementById("div3").innerHTML = i++;
}
}();
</script>
</body>
</html>
我只知道这现象，哪位高手能告诉我为什么会这样？
1766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
