当前位置:首页> 正文
js鼠标滑过弹出层的定位IE6bug解决办法
大家在写div+css的时候经常会用到弹出层,由于IE6的bug,所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面,这种问题在火狐浏览器下可以用z-index来解决,但是在IE6下面是不起作用的,下面的代码给大家提供了一种此类问题的解决办法,原理如下:用Jquery给弹出层的z轴依次增加高度.代码很简单,效果很显著,吼吼!
复制代码 代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://imgbuyun.weixiu-service.com/up79/202210/eadqknjd3rq.dtd"
html xmlns="http://imgbuyun.weixiu-service.com/up79/202210/i4zigcw5dmd"
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"
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia 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鼠标滑过显示二级菜单特效JS实现鼠标滑过链接改变网页背景颜色的方法JS实现鼠标滑过折叠与展开菜单效果代码JavaScript实现鼠标滑过图片变换效果的方法js鼠标滑过图片震动特效的方法当鼠标滑过文本框自动选中输入框内容的JS代码分享JS鼠标滑过图片时切换图片实现思路JS实现表单中checkbox对勾选中增加边框显示效果jsp中使用frameset框架 边框固定不让更改边框的大小JS实现鼠标滑过显示边框的菜单效果
复制代码 代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://imgbuyun.weixiu-service.com/up79/202210/eadqknjd3rq.dtd"
html xmlns="http://imgbuyun.weixiu-service.com/up79/202210/i4zigcw5dmd"
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"
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia href="#"测试新闻标题一/a
div class="layer" style=" display:none;"
a href="#"这里显示弹出层/a
/div
/li
lia 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鼠标滑过显示二级菜单特效JS实现鼠标滑过链接改变网页背景颜色的方法JS实现鼠标滑过折叠与展开菜单效果代码JavaScript实现鼠标滑过图片变换效果的方法js鼠标滑过图片震动特效的方法当鼠标滑过文本框自动选中输入框内容的JS代码分享JS鼠标滑过图片时切换图片实现思路JS实现表单中checkbox对勾选中增加边框显示效果jsp中使用frameset框架 边框固定不让更改边框的大小JS实现鼠标滑过显示边框的菜单效果
展开全文阅读
相关内容
-
隐藏列如何显示出来|excel表格如何取消左边的隐
隐藏列如何显示出来|excel表格如何取消左边的隐藏列,隐藏,取...
-
华为p50折叠手机参数|华为p50pocket折叠手机值
华为p50折叠手机参数|华为p50pocket折叠手机值得入手吗,折叠,...
-
使用腾讯地图定位的简单操作
使用腾讯地图定位的简单操作,操作,地图定位,点击,操作方法,具...
-
vivox27中将定位打开具体操作方法
vivox27中将定位打开具体操作方法,定位,操作方法,点击,定位服...
-
Adobe After Effects绘制正圆显示椭圆的处理方
Adobe After Effects绘制正圆显示椭圆的处理方法,显示,绘制,...
-
Fireworks为图片加边框的操作步骤
Fireworks为图片加边框的操作步骤,边框,工具,点击,调整,选项,...
-
win7桌面显示期待已久的IE图标最有效的方法
win7桌面显示期待已久的IE图标最有效的方法,图标,复制,系统,...
-
windows7桌面没有IE图标让IE显示的方法
windows7桌面没有IE图标让IE显示的方法,图标,桌面,文件,双击,...
-
使IE6正常显示PNG-24格式图片的两种方法
使IE6正常显示PNG-24格式图片的两种方法,格式,方法,法二,复制...
-
CSS3支持IE6, 7, and 8的边框border属性
CSS3支持IE6, 7, and 8的边框border属性,属性,支持,启用,脚本...
-
IE9下DIV本来应该居中的结果显示为居左
IE9下DIV本来应该居中的结果显示为居左,本来,显示,本中,复制,...
-
打开IE浏览器IE窗口显示为一片空白的解决方法
打开IE浏览器IE窗口显示为一片空白的解决方法,解决方法,浏览...
-
解决ExtJS在chrome或火狐中正常显示在ie中不显
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼...
-
IE6中的position:fixed定位兼容性写法分享
IE6中的position:fixed定位兼容性写法分享,定位,兼容性,分享,...
-
IE6,IE7下js动态加载图片不显示错误
IE6,IE7下js动态加载图片不显示错误,显示,加载图片,动态,加载...