鼠标放上格子变长练习

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 .a
 6 {
 7     width:15px;
 8     height:25px;}
 9 #b1
10 {
11     background-color:#F00;}
12 #b1:hover
13 {
14     background-color:#00F;
15     width:55px;}
16 #b2
17 {
18     background-color:#CF0;}
19 #b2:hover
20 {
21     background-color:#0F0;
22     width:55px;}
23 #b3
24 {
25     background-color:#F0F;}
26 #b3:hover
27 {
28     background-color:#600;
29     width:55px;}
30 </style>
31 </head>
32 <body>
33 <div class="a" id="b1"></div>
34 <div class="a" id="b2"></div>
35 <div class="a" id="b3"></div>
36 </body