1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href="" rel="stylesheet"> 10 <style type="text/css"> 11 12 #qwer{ 13 width: 900px; 14 margin: 0 auto; 15 margin-top: 250px; 16 } 17 #qwer li{ 18 float:left; 19 width:150px; 20 height:150px; 21 border:1px solid black; 22 } 23 li img{ 24 float:left; 25 opacity:0.2; 26 cursor: pointer; 27 width: 140px; 28 height: 140px; 29 margin: 5px 5px 5px 5px; 30 } 31 li.current img{ 32 opacity:1; 33 } 34 35 </style> 36 </head> 37 <body> 38 <ul id="qwer"> 39 <li><img src="1.JPG"/></li> 40 <li><img src="1.JPG"/></li> 41 <li><img src="1.JPG"/></li> 42 <li><img src="1.JPG"/></li> 43 <li><img src="1.JPG"/></li> 44 </ul> 45 <script type="text/javascript"> 46 window.onload=function(){ 47 var qwe=document.getElementsByTagName("li"); 48 for (var i=0;i<qwe.length;i++){ 49 qwe[i].onmouseover=function(){ 50 this.className="current"; 51 } 52 qwe[i].onmouseout=function(){ 53 this.className=""; 54 } 55 } 56 57 } 58 </script> 59 </body> 60 </html>
原文：http://www.cnblogs.com/1rookie/p/5824219.html