jquery CSS實現ul表格，帶邊框和鼠標效果

2024-09-05 12:17:08

字體：大中小

來源：轉載

供稿：網友

CSS結合jQuery實現UL 表格，鼠標移過高亮邊框，鼠標滑過顯示提示框，代碼兼容性還算不錯，使用時請把jQuery插件帶到本地，用CSS制作表格效果的也可參考。

<!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表格，帶邊框提示</title><style>ul,li{ margin:0; padding:0; list-style:none; }.bbb{  width:900px;;height:auto; padding-bottom:200px; overflow:hidden; padding-top:50px; 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="http://www.49028c.com/ajaxjs/jquery-1.6.2.min.js"></script><script type="text/javascript">  $(document).ready(function(){            $(".aaa li").hover(			function(){                $(this).append('<div   id="bfhypon"   class="ccc"></div>');				            },			function(){                $(this).children(".ccc").remove();				            });      })</script></head><body style="margin:0; padding:0"><div style="margin-top:100px; margin-left:auto; margin-right:auto;" class="bbb"><ul class="aaa"> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li> <li><div style="width:135px;height:40px; background-color:#6CF; margin-left:auto; margin-right:auto; margin-top:7px;"></div><div style="width:135px; margin-left:auto; margin-right:auto; margin-top:5px">Overview</div></li></ul></div></body></html>

上一篇：純CSS Tab代碼

下一篇：CSS 背景圖片居中