欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

IE应用了filter后mouseover事件异常

程序员文章站 2022-07-12 21:34:36
...
各位复制下面代码,或者下载附件用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>

 

 

我只知道这现象,哪位高手能告诉我为什么会这样?