百度百科的一个小效果
百度百科的一个小效果，感觉不错，取下来保存
方法就是普通的onMouseOve事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>百度</title>
<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>
</head>
<body>
<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="/recommend/?func=hqmore" target="_blank" class="more">更多</a></div><a href="/recommend/?func=hqmore" target="_blank" class="title">优质词条</a></h1>
<div class="good_word">
aaa
<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="/improve/" target="_blank" class="more">更多</a></div><a href="/improve/" target="_blank" class="title">待完善词条</a></h1>
<div class="good_word">
bbb
</div>
</div>
<div><b class="r2_3 l"></b><b class="r2_4 r"></b></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。