鼠标滑过图片添加边框图片无位移[xyytit]

实现下面的效果，鼠标滑过图片添加边框图片无位移——鼠标滑过，图片只是加了边框，不会晃动：

参考代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 4 <title></title>
 5 <style type="text/css">
 6 a{float:left;}//不可修改
 7 a:hover {
 8 width: 182px;//图片减去两边边框的宽度
 9 height: 302px;//图片减去两边边框的宽度
10 border: 4px solid #fff;//边框宽度，可以调整
11 overflow: hidden;//不可修改
12 }
13 a:hover img {
14 margin: -4px;//隐藏图片周围部分，对应边框宽度，可以调整
15 }
16 </style>
17 </head>
18 <body>
19 <div class="T-s-l">
20     <a href="">  <img width="190" heigh="310" src="http://img03.taobaocdn.com/imgextra/i3/272205633/T2jd1xXsBXXXXXXXXX-272205633.jpg"> </a>             
21     <a href="">  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1ZVINFXdaXXb1upjX.jpg"> </a>
22     <a href="">  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1XJYQFXJcXXb1upjX.jpg"> </a>                             
23     <a href="">  <img width="190" heigh="310" src="http://img01.taobaocdn.com/imgextra/i1/122343103/T2YqFsXuxaXXXXXXXX-122343103.jpg"> </a>
24 </div>
25 </body></html>

 

posted on 2013-12-10 22:34  逍遥云天  阅读(386)  评论(0)  编辑  收藏  举报

导航