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 精粹读书笔记(1,2)
Feb 07 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
php 短链接算法收集与分析
2011/12/30 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
SVG描边动画
2017/02/23 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
Django实现登录随机验证码的示例代码
2018/06/20 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
解决Django连接db遇到的问题
2019/08/29 Python
python实现简单俄罗斯方块
2020/03/13 Python
python 实现性别识别
2020/11/21 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
满月酒答谢词
2014/01/14 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
五一口号
2014/06/19 职场文书
团日活动总结怎么写
2014/06/25 职场文书
兴趣班停课通知
2015/04/24 职场文书
2016年校长新年寄语
2015/08/17 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis