CSS实现焦点图切换

<style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font-family:Arial,Tahoma,宋体;font-size:12px;}
    a{color:#000;text-decoration:none;blr:expression(this.onFocus=this.blur());outline:none;}
    a:hover{color:#c00;text-decoration:underline;}
    .layout{width:985px;height:430px;margin:50px auto;}
    div.cols{float:left;margin-right:5px;display:inline;height:300px;overflow:hidden;}
    div.cols .pic{float:left;position:relative;}
    div.cols .pic .black{cursor:pointer;width:100%;position:absolute;left:0;top:0;background-color:#000;opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50);}
    div.colsfelt{width:320px;}
    div.colsmiddle{width:140px;}
    div.colsright{width:515px;margin:0;}
    div.colsmiddle .pic{margin-bottom:5px;}
    div.colsright .pic{margin:0 5px 5px 0;}
    div.colsfelt .pic .black{height:430px;}
    div.colsmiddle .pic .black{height:120px;}
    div.colsright .h185 .black{height:160px;}
    div.colsright .h240 .black{height:240px;}
    div.cols .pic a:hover .black{opacity:0;-moz-opacity:0;filter:alpha(opacity=0);}
</style>

HTML：

<div class="layout">
    <div class="colsfelt cols">
        <div class="pic"><a href="http://hongshengpeng.com/article/show/155.aspx">
        <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://hongshengpeng.com/UpLoadFiles/20130821/2013082116360660.jpg" width="394" height="430" />
        <div class="black"></div></a></div>
    </div>
    <div class="colsmiddle cols">
        <div class="pic"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
        <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="150" height="100" />
        <div class="black"></div></a></div>
        <div class="pic"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
        <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="150" height="100" />
        <div class="black"></div></a></div>
        <div class="pic"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
        <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="150" height="100" />
        <div class="black"></div></a></div>
    </div>
    <div class="colsright cols">
        <div class="pic h185"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
        <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="320" height="160" />
        <div class="black"></div></a></div>
        <div class="pic h185"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
        <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/jquery/images/06.jpg" width="185" height="160" />
        <div class="black"></div></a></div>
        <div class="pic h240"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
        <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="265" height="240" />
        <div class="black"></div></a></div>
        <div class="pic h240"><a href="http://www.hongshengpeng.com/article/show/150.aspx">
        <img src='http://www.hongshengpeng.com/jquery/images/grey.gif' data-original="http://www.hongshengpeng.com/UpLoadFiles/20130818/2013081809285523.JPG" width="240" height="240" />
        <div class="black"></div></a></div>
    </div>
</div>

点击查看演示