很酷的放大镜的效果
在蓝色理想看到的一个非常酷的效果的代码，其实对于某些人来说已经是非常简单的了，但是对于我这种接触标准不是特别多的人来说，已经是非常非常酷的代码了。代码分两部分，第一部分是楼主自己提出的代码，很简单的几段代码就完成了，第二段代码是一个版主修改后的更加酷的代码。
研究一下，以后做菜单的时候用上，就不用想在鼠标触发的时候用图片背景了，这种就很好吗……
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<style type=“text/css”>
<!–
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;
}
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>
<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>
经过发挥后的代码，这种字体不会有变化后那种被拉伸的感觉：
<style type=“text/css”>
ul#hovershow2{
list-style-type: none;
margin: 50px;
width:440px;
float: left;
display: inline;
clear: both;
}
ul#hovershow2 li{
float: left;
display: inline;
width:20px;
height: 20px;
margin: 2px;
}
ul#hovershow2 li a {
text-decoration: none;
display: block;
width:20px;
height:20px;
border:1px red solid;
background-color: White;
line-height: 20px;
font-size: 12px;
text-align: center;
}
ul#hovershow2 li a:hover{
position: absolute;
width:40px;
height: 40px;
line-height: 40px;
font-size: 32px;
z-index:100;
margin: -10px 0 0 -10px;font-family:华文行楷;
}
</style><
ul id=“hovershow2″>
<li><a href=“1#” title=“test”><span>枯</span></a></li>
<li><a href=“2#” title=“test”><span>藤</span></a></li>
<li><a href=“3#” title=“test”><span>老</span></a></li>
<li><a href=“4#” title=“test”><span>树</span></a></li>
<li><a href=“5#” title=“test”><span>昏</span></a></li>
<li><a href=“6#” title=“test”><span>鸦</span></a></li>
<li><a href=“7#” title=“test”><span>古</span></a></li>
<li><a href=“1#” title=“test”><span>道</span></a></li>
<li><a href=“2#” title=“test”><span>西</span></a></li>
<li><a href=“3#” title=“test”><span>风</span></a></li>
<li><a href=“4#” title=“test”><span>瘦</span></a></li>
<li><a href=“5#” title=“test”><span>马</span></a></li>
<li><a href=“6#” title=“test”><span>小</span></a></li>
<li><a href=“7#” title=“test”><span>桥</span></a></li>
<li><a href=“4#” title=“test”><span>流</span></a></li>
<li><a href=“5#” title=“test”><span>水</span></a></li>
<li><a href=“6#” title=“test”><span>人</span></a></li>
<li><a href=“7#” title=“test”><span>家</span></a></li>
</ul>
ul id=“hovershow2″>
<li><a href=“1#” title=“test”><span>枯</span></a></li>
<li><a href=“2#” title=“test”><span>藤</span></a></li>
<li><a href=“3#” title=“test”><span>老</span></a></li>
<li><a href=“4#” title=“test”><span>树</span></a></li>
<li><a href=“5#” title=“test”><span>昏</span></a></li>
<li><a href=“6#” title=“test”><span>鸦</span></a></li>
<li><a href=“7#” title=“test”><span>古</span></a></li>
<li><a href=“1#” title=“test”><span>道</span></a></li>
<li><a href=“2#” title=“test”><span>西</span></a></li>
<li><a href=“3#” title=“test”><span>风</span></a></li>
<li><a href=“4#” title=“test”><span>瘦</span></a></li>
<li><a href=“5#” title=“test”><span>马</span></a></li>
<li><a href=“6#” title=“test”><span>小</span></a></li>
<li><a href=“7#” title=“test”><span>桥</span></a></li>
<li><a href=“4#” title=“test”><span>流</span></a></li>
<li><a href=“5#” title=“test”><span>水</span></a></li>
<li><a href=“6#” title=“test”><span>人</span></a></li>
<li><a href=“7#” title=“test”><span>家</span></a></li>
</ul>
关于 “很酷的放大镜的效果”的评论（1条）
是很酷 哈哈～