注册 | 登陆
您的位置:阿里西西 > 网页特效 > 文字特效 > 详细内容

Jquery制作的UL表格化+边框+鼠标滑过提示框特效

  稿源:互联网   2018-09-15 02:24:24   点击:   撤稿纠错
一款电子商务网站常用的UL表格化+边框+鼠标滑过提示框特效

以下讨论的是和边框 鼠标滑过 提示框 Jquery相关的Jquery制作的UL表格化+边框+鼠标滑过提示框特效 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

<!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>阿里西西网页特效</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.alixixi.com/script/jquery-1.8.3.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 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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</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">Alixixi.com</div></li>
</ul>
</div>

</body>
</html>


关于Jquery制作的UL表格化+边框+鼠标滑过提示框特效的内容写到这里就结束啦,您可以收藏本页网址https://js.alixixi.com/a/2018091588716.shtml方便下次再访问哦。