现实在网站中，我们经常看到有鼠标滑过某个图片，出现边框的效果。如下图：
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>
<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透明的方法。还有，学会上传了：）顺便把例子传上来。
