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

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

参考代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml"><head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 <title></title>

 <style type="text/css">

 a{float:left;}//不可修改

 a:hover {

 width: 182px;//图片减去两边边框的宽度

 height: 302px;//图片减去两边边框的宽度

 border: 4px solid #fff;//边框宽度，可以调整

 overflow: hidden;//不可修改

 }

 a:hover img {

 margin: -4px;//隐藏图片周围部分，对应边框宽度，可以调整

 }

 </style>

 </head>

 <body>

 <div class="T-s-l">

     <a href="">  <img width="190" heigh="310" src="http://img03.taobaocdn.com/imgextra/i3/272205633/T2jd1xXsBXXXXXXXXX-272205633.jpg"> </a>

     <a href="">  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1ZVINFXdaXXb1upjX.jpg"> </a>

     <a href="">  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1XJYQFXJcXXb1upjX.jpg"> </a>

     <a href="">  <img width="190" heigh="310" src="http://img01.taobaocdn.com/imgextra/i1/122343103/T2YqFsXuxaXXXXXXXX-122343103.jpg"> </a>

 </div>

 </body></html>

秒客网

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

相关文章