ie6下z-index问题
0
悬赏园豆：20
[已解决问题]
解决于 2014-12-06 11:59
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 <style> 7 * {margin:0;padding:0} 8 #box {width:360px;border:1px solid #F00;zoom:1;margin:100px auto } 9 #box:after { content:'';display:block;clear:both} 10 #box ul {width:350px;} 11 #box li {width:75px;height:180px;float:left;border:1px solid #666;margin:20px 0 20px 10px;text-align:center;list-style:none;position:relative;display:inline;} 12 #box li .text {background:#F00;width:200px;height:130px;position:absolute;top:-20px;left:10px;display:none} 13 </style> 14 <script> 15 window.onload=function (){ 16 var aUl=document.getElementById('box'); 17 var aLi=aUl.getElementsByTagName('li'); 18 var text=getClassName(aUl,'text') 19 20 21 for(var i=0;i<aLi.length;i++){ 22 aLi[i].index=i; 23 aLi[i].onmouseover=function (){ 24 for(var i=0;i<aLi.length;i++){ 25 aLi[i].zIndex=1; 26 } 27 this.zIndex=6; 28 text[this.index].parentNode.style.background='red'; 29 text[this.index].style.display='block'; 30 //alert(this.zIndex); 31 32 } 33 aLi[i].onmouseout=function (){ 34 35 this.style.background='#fff' 36 text[this.index].style.display='none'; 37 } 38 } 39 function getClassName(oParent,sClass){ 40 var aEle=oParent.getElementsByTagName('*'); 41 var result=[]; 42 for(var i=0;i<aEle.length;i++){ 43 if(aEle[i].className==sClass){ 44 result.push(aEle[i]) 45 } 46 } 47 return result 48 } 49 } 50 </script> 51 </head> 52 53 <body> 54 <div id="box"> 55 <ul> 56 <li style="z-index:5"> 57 <img src="webqq/1.png" width="75" height="150"/> 58 <p class="des">woshihi</p> 59 <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div> 60 </li> 61 <li> 62 <img src="webqq/2.png" /> 63 <p>她shihi</p> 64 <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div> 65 </li> 66 <li> 67 <img src="webqq/3.png" /> 68 <p>wossjd</p> 69 <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div> 70 </li> 71 <li> 72 <img src="webqq/4.png" /> 73 <p>kajd</p> 74 <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div> 75 </li> 76 <li> 77 <img src="webqq/1.png" width="75" height="150"/> 78 <p>woshihi</p> 79 <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div> 80 81 </li> 82 <li> 83 <img src="webqq/2.png" /> 84 <p>她shihi</p> 85 <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div> 86 </li> 87 <li> 88 <img src="webqq/3.png" /> 89 <p>wsjd</p> 90 <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div> 91 </li> 92 <li> 93 <img src="webqq/4.png" /> 94 <p>ksjd</p> 95 <div class="text">本网站域名、播放器软件、土豆标识等)删除或者改变相关视频内容的权利管理电子信息。否则,本网站主办方将保留进一步追究侵权者法律责任的权利</div> 96 </li> 97 </ul> 98 </div> 99 </body> 100 </html>
我想实现的效果就是，当鼠标移入LI时，红色块儿出来，移除消失，但是在ie6下，红色块儿被遮住了，其余浏览器都是好的，，
我看了一些z-index在ie6下失效的原因，然后来看我的demo，估计是div的父级层级不够，因为所有的li都是同一个层级，当我在行内给一个li添加层级时，<li style='z-index:4'></li>，这时这个红块儿显示正常，我就在js中试着给当前移入的这个li提高层级，其余的减少层级，但是失败了，求大神帮忙指点一下
最佳答案
0
我以前是想提高当前li的z-index；用this.zIndex;但是没用（我也不知道为啥），，我换了一种思路，因为我加在行间还是有用，，因此换做给当前li添加className，将z-index属性一边设置，，这样就OK了
