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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
JS前端加密算法示例
Dec 22 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
深入理解Python中装饰器的用法
2016/06/28 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
顶岗实习接收函
2014/01/09 职场文书
小学开学寄语
2014/01/19 职场文书
超市采购员岗位职责
2014/02/01 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL