<a>标签问题

效果如下
可以用纯css实现下面的效果吗
实在是对a标签不大熟悉,请各位大虾指教下.......
<!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>XXXXX</title>
<style type="text/css">
a{ background-color:#EFEBEF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none; }
a.cc{background-color:#FFFFFF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none; color:#000000}
a:hover{background-color:#FFFFFF;width:100px; height:135px; display:inline-table; zoom:1; text-align:center;text-decoration:none; color:#000000}
img { border:1px solid #CCCCCC}
span{ display: block; margin-top:20px; margin-bottom:10px;}
</style>
</head>
<body style=" padding:30px; margin:0px; font-size:12px;">    <a href="javascript:void(0)"; onclick='ss(this)'><span><img src="http://www.google.cn/help/ig/art/images/themes/langl/thumb_sm.jpg"></span>郎朗</a><a href="javascript:void(0)" onclick='ss(this)'><span><img src="http://www.google.cn/help/ig/art/images/themes/tianlm/thumb_sm.jpg"></span>田黎明</a><a href="javascript:void(0)" onclick='ss(this)'><span><img src="http://www.google.cn/help/ig/art/images/themes/caizz1/thumb_sm.jpg"></span>蔡志忠（一）</a><a href="javascript:void(0)" onclick='ss(this)'><span><img src="http://www.google.cn/help/ig/art/images/themes/caizz2/thumb_sm.jpg"></span>蔡志忠（二）</a>
<script>
var o=null ;
function ss(obj){
o&&(o.className='');
o=obj;
obj.className ='cc';
}
</script></body>
</html>

解决方案 »

  1.   

    当然可以，现在不正是CSS实现吗？JS只是改变其样式而已
      

  2.   

    灵活用a 的a:link,a:visited,a:hover,a:active
    就行了可以省去js
      

  3.   

    link:连接平常的状态      active:连接被按下的时候      visited:连接被访问过之后      hover:鼠标放到连接上的时候
      

  4.   

    LZ的这种没法用css替代a:visited在不同浏览器的效果不太一样
    帮LZ优化一下
    <!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>XXXXX</title>
    <style type="text/css">
    body {
    padding:30px; margin:0px; font-size:12px;
    }
    #warp a {
    float:left; background-color:#EFEBEF; width:100px; height:135px; display:block; text-align:center; text-decoration:none;
    }
    #warp a.cc {
    background-color:#FFFFFF; color:#000000;
    }
    #warp a:hover {
    background-color:#FFFFFF; color:#000000;
    }
    #warp a img {
    border:1px solid #CCCCCC; display:block; margin:20px 10px;
    }
    </style>
    </head>
    <body>
    <div id="warp">
    <a href="#" onclick="ss(this)">
    <img src="http://www.google.cn/help/ig/art/images/themes/langl/thumb_sm.jpg">郎朗</a>
    <a href="#" onclick="ss(this)">
    <img src="http://www.google.cn/help/ig/art/images/themes/tianlm/thumb_sm.jpg">田黎明</a>
    <a href="#" onclick="ss(this)">
    <img src="http://www.google.cn/help/ig/art/images/themes/caizz1/thumb_sm.jpg">蔡志忠（一）</a>
    <a href="#" onclick="ss(this)">
    <img src="http://www.google.cn/help/ig/art/images/themes/caizz2/thumb_sm.jpg">蔡志忠（二）</a>
    </div>
    <script type="text/javascript">
    var o = null;
    function ss(obj){
    o && (o.className = '');
    o = obj;
    obj.className = 'cc';
    }
    </script>
    </body>
    </html>