<！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”>
<头>
<meta http-equiv =“ Content-Type” content =“ text / html; charset = utf-8” />
<title> jQuery + CSS实现的UL表格，带边框提示丨芯晴网页特效丨CsrCode.CN </ title>
<样式>
ul，li {margin：0; 填充：0; list-style：无；}
.bbb {width：900px ;; height：auto; padding-bottom：50px; 溢出：隐藏 padding-top：30px; padding-left：50px;}
.aaa {width：755px; 显示：块; 向左飘浮; 变焦：1; border-top：1px实线＃6CF; border-left：1px实线＃6CF; clear：both;}
.aaa li {display：block; border-right：1px实心＃6CF; border-bottom：1px实心＃6CF; 向左飘浮; 宽度：150px; 高度：75像素；位置：相对；padding：0px}
.aaa li：hover {border：5px solid＃F30; 左边距：-5px; margin-top：-5px; 右边距：-4px; 底边距：-4px; z-index：999}
.ccc {width：135px; 高度：15像素；背景颜色：黑色；不透明度：0.5; 位置：绝对；top：32px; 左：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（
功能（）{
$（this）.append（'<div class =“ ccc”> </ div>'）;
}，
功能（）{
$（this）.children（“。ccc”）。remove（）;
}）;
}）
</ script>
</ head>
<body>
<div class =“ bbb”>
<ul class =“ aaa”>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
<li> <div> </ div> <div>概述</ div> </ li>
</ ul>
</ div>
</ body>
</ html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery