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>
