您的位置：首页 > 其它

小项目-鼠标移入改变图片透明度

2016-11-28 10:31 375 查看

<style type="text/css">
.main{width:630px;margin:0 auto;}
ul{ width:630px;}
ul:after{content:'.';display:block;clear:both; visibility:hidden;}
li{ list-style:none; float:left; margin:10px;}
img{ width:200px;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
li.current img{opacity:1;filter:alpha(opacity=100);}
</style>
</head>

<body>
<div class="main">
<ul>
<li><img alt="" src="12化三毕业照 2016-06-14 247.JPG"></li>
<li><img alt="" src="12化三毕业照 2016-06-14 061.JPG"></li>
<li><img alt="" src="12化三毕业照 2016-06-14 303.JPG"></li>
<li><img alt="" src="12化三毕业照 2016-06-14 397.JPG"></li>
</ul>
</div>
<script type="text/javascript">
var change=document.getElementsByTagName("li");
for(var i=0;i<change.length;i++)
{
if(change[i].addEventListener){
change[i].addEventListener("mouseover",function(){
change[i].setAttribute("class","current");
},false);
change[i].addEventListener("mouseout",function(){
change[i].removeAttribute("class");
},false);

}
else{
change[i].attachEvent("onmouseover",function(){
change[i].setAttribute("class","current");
});
change[i].addEventListener("onmouseout",function(){
change[i].removeAttribute("class");
});
}
}
</script>

出现TypeError: change[i] is undefined，将change[i]改成this后能正确显示

若用jquery，代码如下

$("li").each(function(i, el) {
$(this).mouseover(function(){
$(this).addClass("current");
});
$(this).mouseout(function(){
$(this).removeClass("current");
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： typeerror

相关文章推荐

新的分享

章节导航