说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表：鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距，去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /*列表id*/ width:700px; overflow:hidden; zoom:1; border:1px solid #333; /*深灰色*/ margin:0 auto;/*左右置中*/ padding:0 0 10px 10px;/*内边距*/ } #imgList li{ float:left;/*左浮动，水平排列*/ width:128px; height:128px; border:1px solid #ccc;/*白色*/ margin:10px 10px 0 0;/*外边距*/ } #imgList li img{ float:left;/*左浮动*/ opacity:0.3;/*透明度*/ cursor:crosshair;/*十字手形*/ filter:alpha(opacity=30); } #imgList li.current img{ opacity:1; filter:alpha(opacity=100); } </style> <script> window.onload = function () { var oLi = document.getElementsByTagName("li");//获取li引用，此方法返回一个集合 for (var i = 0; i < oLi.length; i++) { //for循环遍布每个li元素，逐个添加mouseover和mouseout事件处理程序 oLi[i].onmouseover = function () { this.className = "current"; //mouseover，则添加类名，以达到改变透明度的效果 }; oLi[i].onmouseout = function () {//mouseout，去除类名，修改透明度 this.className = ""; } } } </script> </head> <body> <!--图片列表每个li元素包裹一个img元素--> <ul id="imgList"> <li><img src="img/shirt_1.jpg" /></li> <li><img src="img/shirt_2.jpg" /></li> <li><img src="img/shirt_3.jpg" /></li> <li><img src="img/shirt_4.jpg" /></li> <li><img src="img/shirt_1.jpg" /></li> <li><img src="img/shirt_2.jpg" /></li> <li><img src="img/shirt_3.jpg" /></li> <li><img src="img/shirt_4.jpg" /></li> <li><img src="img/shirt_1.jpg" /></li> <li><img src="img/shirt_2.jpg" /></li> </ul> </body> </html>