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

程序员新艳技术 2022年11月7日

0 收藏 715 点赞 1,092 浏览 1021 个字

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

参考代码：

 <!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="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >  <img width="190" heigh="310" src="http://img03.taobaocdn.com/imgextra/i3/272205633/T2jd1xXsBXXXXXXXXX-272205633.jpg"> </a>
     <a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1ZVINFXdaXXb1upjX.jpg"> </a>
     <a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >  <img width="190" heigh="310" src="http://img.taobaocdn.com/bao/uploaded/T1XJYQFXJcXXb1upjX.jpg"> </a>
     <a href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >  <img width="190" heigh="310" src="http://img01.taobaocdn.com/imgextra/i1/122343103/T2YqFsXuxaXXXXXXXX-122343103.jpg"> </a>
 </div>
 </body></html>