脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js鼠标经过弹出层bug

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

 更新时间：2012年12月26日 11:02:14   作者：  
大家在写div+css的时候经常会用到弹出层，由于IE6的bug，所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面;用Jquery给弹出层的z轴依次增加高度可解决.代码很简单，效果很显著,需要了解的朋友可以参考下
大家在写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);
}
您可能感兴趣的文章:

相关文章

  • CocosCreator通用框架设计之网络

    CocosCreator通用框架设计之网络

    这篇文章主要介绍了CocosCreator通用框架设计之网络，详细讲解了WebSocket的原理和使用方法，对WebSocket感兴趣的同学，一定要看一下
    2021-04-04
  • 微信小程序学习(4)-系统配置app.json详解

    微信小程序学习(4)-系统配置app.json详解

    我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
    2017-01-01
  • vue2.x的深入学习--关于h函数的说明

    vue2.x的深入学习--关于h函数的说明

    下面小编就为大家分享一篇基于h函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2021-08-08
  • js实现微信聊天界面

    js实现微信聊天界面

    这篇文章主要为大家详细介绍了js实现微信聊天界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • javascript实现的制作特殊字的脚本

    javascript实现的制作特殊字的脚本

    javascript实现的制作特殊字的脚本...
    2007-06-06
  • JavaScript中ES6字符串扩展方法

    JavaScript中ES6字符串扩展方法

    这篇文章主要介绍了JavaScript中ES6字符串扩展方法的相关资料,非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-08-08
  • 利用svg实现带加载进度的loading

    利用svg实现带加载进度的loading

    svg是基于XML，由World Wide Web Consortium （W3C）联盟开发的一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。本文将使用svg实现一个带加载进度的loading，需要的可以参考一下
    2022-11-11
  • javascript中的this作用域详解

    javascript中的this作用域详解

    这篇文章主要介绍了javascript中的this作用域详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • javascript 去字符串空格终极版(支持utf8)

    javascript 去字符串空格终极版(支持utf8)

    其实空格有两个，一个ASCII编号是32，另一个是ASCII编号是160.后者是unicode编码。以前写一个贴子ie6下准确判断空格还以是IE6不能正确判断空格。
    2009-11-11
  • 微信小程序实现电子签名并导出图片

    微信小程序实现电子签名并导出图片

    这篇文章主要为大家详细介绍了微信小程序实现电子签名，并导出图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论