图片链接hover移动的解决方案分析

现实在网站中，我们经常看到有鼠标滑过某个图片，出现边框的效果。如下图：


       hover前               hover后

我们可以简单编写代码如下：

<! 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=UTF-8"   />
< title ></ title >
</ head >
< body >
< div  id ="pic" >
< a  href ="http://123.sogou.com" >< img  src ="http://p9.123.sogou.com/imgu/2014/01/20140115142659_968.jpg" ></ img ></ a >
</ div >
</ body >
< style  type ="text/css"  charset ="utf-8" >
div,a,img { border : 0 }
#pic  { width : 118px ;  height :  67px ; margin :  auto ; }
#pic a { display :  inline-block ; width :  114px ; height :  63px ; border : 0 ; }
#pic a:hover { border :  2px solid #6ccdee ; }
#pic a.hover { border :  2px solid #6ccdee ; }
#pic img { width :  114px ;  height :  63px ; }
</ style >
</ html >

发现当hover的时候会出现图片跳动的效果，这个效果截图不下来啊，大家可以把上面的代码拷贝粘贴，用浏览器看下效果，呵呵：）

我用firebug看，其实当hover时候，宽度和长度并没有变化。考虑是位置的变化，正常时候，a元素靠在div的左上角；当hover的时候，border增加了，图片自然向右下角移动。

考虑两种解决办法：

1.利用padding(或者margin)。

#pic a{display: inline-block;width: 114px;height: 63px;border:0; padding:2px;}

#pic a:hover { border :  2px solid #6ccdee ; padding:0px;}

•  正常时，a元素内边距2px;

• hover时，a元素内边距取消，正好让给2px的边距。

2.设置border透明。

这个方法设置a元素border:2px solid transparent; 不过ie6不支持设置border透明，需要采用其他兼容性的办法。

#pic a{ display:  inline-block; width:  114px; height:  63px; border: 2px solid transparent; _border-color: tomato;   /* For IE6- */ _filter: chroma(color=tomato); /* For IE6- */}

 

综上，采用第一种方法更佳：）
ps:博客园怎么插入附件。。。想把完整的代码弄成附件传上来。
   刚来，不会用，悲催。
2014年1月30日 今天有空，修改了下设置border透明的方法。还有，学会上传了：）顺便把例子传上来。

padding方法   

border透明方法

 

转载于:https://www.cnblogs.com/Andres/p/3528858.html