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 相关文章推荐
angularjs中的e2e测试实例
Dec 06 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
js实现日历
Nov 07 Javascript
什么是SOLID
Mar 24 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短域名转换为实际域名函数
2011/01/17 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
React优化子组件render的使用
2019/05/12 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
linux下安装easy_install的方法
2013/02/10 Python
python求crc32值的方法
2014/10/05 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
微信小程序python用户认证的实现
2019/07/29 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
如何教少儿学习Python编程
2020/07/10 Python
计算机网络毕业生自荐信
2013/10/01 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL