CSS实现图片选中加边框效果

html代码：

<link href="/stylesheets/panda.css" media="screen" rel="stylesheet" type="text/css"/>

<div class="box" >

<a href="javascript:void(0);" >

<span>功夫熊猫</span>

<img src="/images/panda.gif" alt="功夫熊猫" border="0"/>

</a>

</div>

Css代码：

.box{width:200px;height:229px;position:relative;}

.box a{border:1px solid #F0F0E8;background-color:#FFF;padding:6px;display:block;}

.box a:hover{border:1px solid #000;background-color:#333;text-decoration: none;}

.box a span{display:none; text-align:center; font-size:12px;}

.box a:hover span{color:#FFF;display:block;background-color:#333;width:210px;position:absolute;top:220px;left:0px;line-height:20px;}

.box a img{width:200px;height:229px;}