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

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

  稿源:本站整理   2018-09-15   点击:   撤稿纠错
一款电子商务网站常用的UL表格化+边框+鼠标滑过提示框特效
阿里西西小编给您推荐这个Jquery制作的UL表格化+边框+鼠标滑过提示框特效,这里还有关于边框 鼠标滑过 提示框 Jquery 的教程,希望您能够喜欢并学到东西提升自己的知识与技能,下面是内容详细阅读:
<!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> 教程内容到此结束,欢迎您再次访问http://www.alixixi.com,我们致力于提供丰富的web开发教程及资源。

更多关于 边框 鼠标滑过 提示框 Jquery 的文章
相关阅读

相关排行总榜

图像特效

菜单特效

日期特效

HTML5打造的酷炫3D 360度图片立体浏览特效
原生JS写的一个书架式的图片缩放滚动展示特
jquery实现的4屏切换焦点图动态显示大图js特
美女拼图游戏小程序网页特效代码版 jquery制
用JQUERY实现的吹泡泡js特效代码 自己替换泡
类似手机左右滑动特效 可用鼠标拖拽左右切换
鼠标悬停在图片上浮出并显示文字提示的JS特
鼠标悬念时背景变灰色 焦点突出显示所悬停图
纯CSS实现的鼠标悬停时放大且加大图片、图层
跟随鼠标移动立体翻转的JS图片展示效果特效
鼠标悬停后带下滑动图片展示的导航菜单js特
简单实用的纯CSS实现的横向多级导航特效代码
通过JS+CSS实现的三级网站竖向导航浮动联动
通过js制作竖向的tab选项卡切换显示不同内容
鼠标滑过导航菜单时缓缓动态显示下拉列表的
翻页滚动条到内容最下方时,导航模块一直悬
一款竖向四级联动的导航菜单特效 4级网站菜
教您用简单的CSS代码实现浮动的二级导航菜单
一款仿支付宝应用中心可用鼠标拖动增减图标
一例非常简单的js原生态制作及实现的三级菜
js代码下按指定格式显示日期时间样式特效
一款网友自编简单的日历js代码特效
用js实现给网页上每日自动更新换一张图片展
JS制作的日期选择器 方便应用于前端页面开发
利用js制作一个最简单的带秒表走动的日期时
通过JQUERY制作类似酒店入住时间的日期选择
原生JS代码制作带记事备忘功能的双月份显示
一款原生JS编写的文本框输入日历日期选择器
用js检测判断时间日期的间距大于多少天