论坛首页 Web前端技术论坛

IE应用了filter后mouseover事件异常

浏览 1795 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-02-17  
<!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>

 

 

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

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics