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

大家在写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='https://www.6hehe.com/dnjc/jquery-1.3.2.min.js' type='text/javascript'/script /head body div ul lia href='https://www.6hehe.com/dnjc/42754.html#'测试新闻标题一/a div a href='https://www.6hehe.com/dnjc/42754.html#'这里显示弹出层/a /div /li lia href='https://www.6hehe.com/dnjc/42754.html#'测试新闻标题一/a div a href='https://www.6hehe.com/dnjc/42754.html#'这里显示弹出层/a /div /li lia href='https://www.6hehe.com/dnjc/42754.html#'测试新闻标题一/a div a href='https://www.6hehe.com/dnjc/42754.html#'这里显示弹出层/a /div /li lia href='https://www.6hehe.com/dnjc/42754.html#'测试新闻标题一/a div a href='https://www.6hehe.com/dnjc/42754.html#'这里显示弹出层/a /div /li lia href='https://www.6hehe.com/dnjc/42754.html#'测试新闻标题一/a div a href='https://www.6hehe.com/dnjc/42754.html#'这里显示弹出层/a /div /li lia href='https://www.6hehe.com/dnjc/42754.html#'测试新闻标题一/a div a href='https://www.6hehe.com/dnjc/42754.html#'这里显示弹出层/a /div /li lia href='https://www.6hehe.com/dnjc/42754.html#'测试新闻标题一/a div a href='https://www.6hehe.com/dnjc/42754.html#'这里显示弹出层/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实现鼠标滑过显示边框的菜单效果