仿百度贴吧整块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>