js鼠标滑过弹出层的定位IE6bug解决办法


Posted in Javascript onDecember 26, 2012

大家在写div+css的时候经常会用到弹出层,由于IE6的bug,所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面,这种问题在火狐浏览器下可以用z-index来解决,但是在IE6下面是不起作用的,下面的代码给大家提供了一种此类问题的解决办法,原理如下:用Jquery给弹出层的z轴依次增加高度.代码很简单,效果很显著,吼吼!

<!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> 
.box { width:800px; margin:10px auto; background:#f1f1f1; z-index:0; padding:10px;display:inline-table; text-align:center;} 
.box ul li { width:150px; height:150px; float:left; border:solid 1px #ccc; background:#CCFF99; margin:10px; position:relative; list-style:none;} 
.box ul li .layer { position:absolute; left:150px; top:0; width:120px; height:100px; background:#000; color:#fff; z-index:99999;} 
</style> 
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
</head> 
<body> 
<div class="box"> 
<ul id="boxcotent"> 
<li><a href="#">测试新闻标题一</a> 
<div class="layer" style=" display:none;"> 
<a href="#">这里显示弹出层</a> 
</div> 
</li> 
<li><a href="#">测试新闻标题一</a> 
<div class="layer" style=" display:none;"> 
<a href="#">这里显示弹出层</a> 
</div> 
</li> 
<li><a href="#">测试新闻标题一</a> 
<div class="layer" style=" display:none;"> 
<a href="#">这里显示弹出层</a> 
</div> 
</li> 
<li><a href="#">测试新闻标题一</a> 
<div class="layer" style=" display:none;"> 
<a href="#">这里显示弹出层</a> 
</div> 
</li> 
<li><a href="#">测试新闻标题一</a> 
<div class="layer" style=" display:none;"> 
<a href="#">这里显示弹出层</a> 
</div> 
</li> 
<li><a href="#">测试新闻标题一</a> 
<div class="layer" style=" display:none;"> 
<a href="#">这里显示弹出层</a> 
</div> 
</li> 
<li><a href="#">测试新闻标题一</a> 
<div class="layer" style=" display:none;"> 
<a href="#">这里显示弹出层</a> 
</div> 
</li> 
</ul> 
</div> 
<script type="text/javascript"> 
for(var i = 0; i < $(".box li").length;i++){ 
var j = 10000-i 
$(".box li").eq(i).css("z-index",j); 
} 
$("#boxcotent li").hover(function(){ 
$(this).children(".layer").show();},function(){$(this).children(".layer").hide();} 
); 
$("#boxcotent li").hover(function(){ 
$(this).addClass("s");},function(){$(this).removeClass("s");} 
); 
</script> 
</body> 
</html> 
以上JS代码需要引入jquery-1.3.2.min.js文件 
关键JS代码 
for(var i = 0; i < $(".box li").length;i++){ 
var j = 10000-i 
$(".box li").eq(i).css("z-index",j); 
}
Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
ext jquery 简单比较
Apr 07 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 #Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 #Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 #Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 #Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 #Javascript
Javascript图像处理思路及实现代码
Dec 25 #Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 #Javascript
You might like
PHP动态变静态原理
2006/11/25 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php之可变函数的实例详解
2017/09/13 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python中Numpy ndarray的使用详解
2019/05/24 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python如何查看网页代码
2020/06/07 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
类和结构的区别
2012/08/15 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
汽车转让协议书
2015/01/29 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
小时代观后感
2015/06/10 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
德劲DE1102数字调谐收音机机评
2022/04/07 无线电