实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动:
参考代码:
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>