1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 * 8 { 9 margin: 0; 10 padding: 0; 11 } 12 #con 13 { 14 margin: 50px auto; 15 list-style: none; 16 width: 400px; 17 height: 50px; 18 background: green; 19 } 20 #con:after 21 { 22 content: ""; 23 display: block; 24 clear: both; 25 } 26 #con li 27 { 28 float: left; 29 width: 98px; 30 border:1px solid red; 31 height:48px; 32 line-height: 48px; 33 text-align: center; 34 cursor: pointer; 35 position: relative; 36 } 37 #con div 38 { 39 width: 400px; 40 height: 400px; 41 background: #ccc; 42 position: absolute; 43 left: 0px; 44 top: 50px; 45 display: none; 46 } 47 </style> 48 </head> 49 <body> 50 <ul id="con"> 51 <li><h2>人物一</h2><div>人物一</div></li> 52 <li><h2>人物二</h2><div>人物二</div></li> 53 <li><h2>人物三</h2><div>人物三</div></li> 54 <li><h2>人物四</h2><div>人物四</div></li> 55 </ul> 56 </body> 57 <script src="jquery-1.8.3.min.js"></script> 58 <script src="jquery.easing.min.js"></script> 59 60 <script> 61 $(function() { 62 $('#con li').mouseover(function() { 63 var i=$(this).index('li'); 64 $('#con li').eq(i).css({'background':'#ccc','color':'red'}); 65 $('#con li div').eq(i).stop(true,true).show('normal'); 66 }) 67 $('#con li').mouseout(function() { 68 var i=$(this).index('li'); 69 $('#con li').eq(i).css({'background':'green','color':'black'}); 70 $('#con li div').eq(i).stop(true,true).hide('normal'); 71 }) 72 }) 73 </script> 74 </html>