<!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>jQuery+CSS实现的UL表格，带边框提示丨芯晴网页特效丨CsrCode.CN</title>
<style>
ul,li{ margin:0; padding:0; list-style:none; }
.bbb{ width:900px;;height:auto; padding-bottom:50px; overflow:hidden; padding-top:30px; padding-left:50px;}
.aaa{width:755px; display:block; float:left; zoom:1; border-top:1px solid #6CF; border-left:1px solid #6CF; clear:both;}
.aaa li{ display: block; border-right:1px solid #6CF;border-bottom:1px solid #6CF; float:left; width:150px; height:75px; position:relative; padding:0px}
.aaa li:hover{ border:5px solid #F30; margin-left:-5px; margin-top:-5px; margin-right:-4px; margin-bottom:-4px; z-index:999}
.ccc{ width:135px; height:15px; background-color:black; opacity:0.5; position:absolute; top:32px; left:7px}
</style>
<script type="text/javascript" src="/images/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".aaa li").hover(
function(){
$(this).append('<div class="ccc"></div>');
},
function(){
$(this).children(".ccc").remove();
});
})
</script>
</head>
<body >
<div class="bbb">
<ul class="aaa">
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
<li><div ></div><div >Overview</div></li>
</ul>
</div>
</body>
</html>