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

<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>

 

.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;}

 选中前：

选中后：

评论

5 楼 ulear 2009-12-10  

思路不错，学习了

4 楼 qianwan 2009-12-09  

学习了，我之前就在找这个资料。

3 楼 phpxiaoxin 2009-11-18  

好像很普通的手法，没看出什么特别的？

2 楼 youjianbo_han_87 2009-11-18  

8 错 8 错 8 错

1 楼 felixtsin 2009-11-11  

不错啊，收藏了