1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 list-style: none; 11 } 12 ol>li{ 13 width: 50px; 14 height: 30px; 15 text-align: center; 16 line-height: 30px; 17 color: red; 18 background: #e0e0e0; 19 display: inline-block; 20 margin-right: 3px; 21 font-weight: bold; 22 cursor: pointer; 23 } 24 ul{ 25 margin: 100px 0px 0px 100px; 26 position: relative; 27 } 28 ul>li{ 29 width: 300px; 30 height: 200px; 31 font-size: 40px; 32 color: #fff; 33 position: absolute; 34 top: 0px; 35 left: 0px; 36 display: none; 37 } 38 ul>li:nth-of-type(1){ 39 background: #ff6700; 40 } 41 ul>li:nth-of-type(2){ 42 background: green; 43 } 44 ul>li:nth-of-type(3){ 45 background: blue; 46 } 47 .show{ 48 display: block; 49 } 50 .bg{ 51 background: #FF6700; 52 color: white; 53 } 54 </style> 55 </head> 56 <body> 57 <ol id="ol"> 58 <li>1</li> 59 <li>2</li> 60 <li>3</li> 61 </ol> 62 <ul id="ul"> 63 <li>A</li> 64 <li>B</li> 65 <li>C</li> 66 </ul> 67 <script type="text/javascript"> 68 var li = document.querySelectorAll("ol li"); 69 var lis = document.querySelectorAll("ul li"); 70 71 lis[0].className="show"; 72 li[0].className = "bg"; 73 for(var i=0;i<li.length;i++){ 74 li[i].index = i; 75 li[i].onmouseover = function(){ 76 clear(); 77 this.className = "bg"; 78 lis[this.index].className = "show"; 79 } 80 } 81 82 function clear(){ 83 for(var j=0;j<lis.length;j++){ 84 lis[j].className=""; 85 li[j].className=""; 86 } 87 } 88 </script> 89 </body> 90 </html>