代码如下：

<!--StartFragment--><style type="text/css">
.demo a {
float:left;
margin:5px 1px 0 1px;
width:20px;
height:20px;
color:#999;
font:12px/20px 宋体;
text-align:center;
text-decoration:none;
border:1px solid orange;
}
.demo a:hover {
position:relative;
margin:0 -9px 0 -9px;
padding:0 5px;
width:30px;
height:30px;
font:bold 16px/30px 宋体;
color:#000;
border:1px solid black;
background:#eee;
}
</style>
<div class="demo">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>

　　放大的关键在于元素的定位，position:relative 与 负值的margin。补习一下position的知识：

　　设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它四周内容的规划。假如其他具有不同 z-index 属性的对象曾经占据了给定的位置，他们之间不会互相影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

　　要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象服从正常的HTML规划规则，在前一个对象之后立即被呈递。

　　设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以依据它的前一个对象进行偏移。在绝对(relative)定位对象之后的文本或对象占有他们本人的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置绝对(relative)定位对象在可视区域之外，滚动条不会出现。

　　演示效果：

<style type="text/css">.demo a { float:left; margin:5px 1px 0 1px; width:20px; height:20px; color:#999; font:12px/20px 宋体; text-align:center; text-decoration:none; border:1px solid orange; }.demo a:hover { position:relative; margin:0 -9px 0 -9px; padding:0 5px; width:30px; height:30px; font:bold 16px/30px 宋体; color:#000; border:1px solid black; background:#eee; }</style><div class="demo"><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a></div>

[Ctrl+A 全部选择 提示：你可先修正部分代码，再按运转]