浏览 1786 次
|
精华帖 (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>
我只知道这现象，哪位高手能告诉我为什么会这样？ 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
