js鼠标滑过弹出层的定位IE6bug解决办法
js鼠标滑过弹出层的定位IE6bug解决办法
发布时间:2016-12-30 来源:查字典编辑
摘要:大家在写div+css的时候经常会用到弹出层,由于IE6的bug,所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面,这种...

大家在写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>

<ul id="boxcotent">

<li><a href="#">测试新闻标题一</a>

<div>

<a href="#">这里显示弹出层</a>

</div>

</li>

<li><a href="#">测试新闻标题一</a>

<div>

<a href="#">这里显示弹出层</a>

</div>

</li>

<li><a href="#">测试新闻标题一</a>

<div>

<a href="#">这里显示弹出层</a>

</div>

</li>

<li><a href="#">测试新闻标题一</a>

<div>

<a href="#">这里显示弹出层</a>

</div>

</li>

<li><a href="#">测试新闻标题一</a>

<div>

<a href="#">这里显示弹出层</a>

</div>

</li>

<li><a href="#">测试新闻标题一</a>

<div>

<a href="#">这里显示弹出层</a>

</div>

</li>

<li><a href="#">测试新闻标题一</a>

<div>

<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教程学习
编程开发子分类