仿百度贴吧整块div的hover效果 （示例代码）

（示例图片）

（CSS代码）

<style type="text/css">
body{margin:4px 10px 4px 8px;background:#fff;color:#000;
text-align:center}
form,h1,h2,h3,h4,ul,li,dl,dt,dd{margin:0;padding:0}
body,div,td,th{font-family:Arial;font-size:14px}
div{text-align:left}
img{border:0}
ul{list-style:none}
a{color:#36c;text-decoration:underline}
.bg{background:#F6F6F6}
.l{float:left}
.r{float:right}
.clear{clear:both;font-size:0;line-height:0;height:0;
visibility:visible}
.area2{width:771px;margin-left:11px;background:#dddfe1;}
.more{font-size:12px;font-weight:normal;padding-right:10px;
float:right;
background:url(http://img.baidu.com/img/baike/bgs1.gif) no-repeat right 3px;
padding-right:8px;text-decoration:none;margin-top:3px}
a.more:hover{text-decoration:underline}
.title{text-decoration:none;color:#000}
.box1,.box2{margin-top:10px}
.box1 .r2_1,.box1 .r2_2,.box1 .r2_3,.box1 .r2_4,.box2
 .r2_1,.box2 .r2_2,.box2 .r2_3,.box2 .r2_4{
 display:block;width:8px;height:8px;overflow:hidden;
 background:url(http://img.baidu.com/img/baike/bgs1.gif)}
.box1 .r2_1{background-position:0 -365px}
.box1 .r2_2{background-position:-8px -365px}
.box1 .r2_3{background-position:0 -373px;margin-top:-8px}
.box1 .r2_4{background-position:-8px -373px;margin-top:-8px}
.box2 .r2_1{background-position:0 -391px}
.box2 .r2_2{background-position:-8px -391px}
.box2 .r2_3{background-position:0 -399px;margin-top:-8px}
.box2 .r2_4{background-position:-8px -399px;margin-top:-8px}
.box1 .brd{border:3px solid #dddfe1;background:#fff}
.box2 .brd{border:3px solid #c7c7c7;background:#fff}
.box1 h1,.box2 h1{font-size:14px;padding:5px 0 2px 15px;
line-height:22px;border-bottom:1px solid #d4d4d4;
background:url(http://img.baidu.com/img/baike/bgs2.gif) repeat-x 0 -88px}
.box1 h1 div,.box2 h1 div{position:relative}
.box1 h1 .more,.box2 h1 .more{position:absolute;
right:10px;line-height:16px}
.box3{width:380px;}
.good_word{height:200px;padding:10px}
</style>
（HTML代码）

<div class="area2">
  <div class="box3 l">
    <div class="box1" onMouseOver="this.className='box2'"
	 onMouseOut="this.className='box1'">
      <div><b class="r2_1 l"></b><b class="r2_2 r"></b></div>
      <div class="brd">
        <h1>
          <div><a href="http://www.865171.cn" target="_blank"
		   class="more">更多</a></div>
          <a href="http://www.865171.cn" target="_blank"
		   class="title">优质词条</a></h1>
        <div class="good_word"> <a href="http://www.865171.cn">
		免费模板网</a>
          <div class="clear"></div>
        </div>
      </div>
      <div><b class="r2_3 l"></b><b class="r2_4 r"></b></div>
    </div>
  </div>
  <div class="box3 r">
    <div class="box1" onMouseOver="this.className='box2'"
	 onMouseOut="this.className='box1'">
      <div><b class="r2_1 l"></b><b class="r2_2 r"></b></div>
      <div class="brd">
        <h1>
          <div><a href="http://www.865171.cn" target="_blank"
		   class="more">更多</a></div>
          <a href="http://www.865171.cn" target="_blank"
		   class="title">待完善词条</a></h1>
        <div class="good_word"> <a href="http://www.865171.cn">
		www.865171.cn</a> </div>
      </div>
      <div><b class="r2_3 l"></b><b class="r2_4 r"></b></div>
    </div>
  </div>
  <div class="clear"></div>
</div>