js鼠標滑過彈出層的定位bug解決辦法 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

大傢在寫p+css的時候經常會用到彈出層,由於IE6的bug,所以當使用多個標簽重復寫彈出層的時候會遇到後面的層壓在瞭彈出層的上面,這種問題在火狐瀏覽器下可以用z-index來解決,但是在IE6下面是不起作用的,下面的代碼給大傢提供瞭一種此類問題的解決辦法,原理如下:用Jquery給彈出層的z軸依次增加高度.代碼很簡單,效果很顯著,吼吼!
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://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>
 <p class="box">
  <ul id="boxcotent">
   <li><a href="#">測試新聞標題一</a>
    <p class="layer" style=" display:none;">
     <a href="#">這裡顯示彈出層</a>
    </p>
   </li>
   <li><a href="#">測試新聞標題一</a>
    <p class="layer" style=" display:none;">
     <a href="#">這裡顯示彈出層</a>
    </p>
   </li>
   <li><a href="#">測試新聞標題一</a>
    <p class="layer" style=" display:none;">
     <a href="#">這裡顯示彈出層</a>
    </p>
   </li>
   <li><a href="#">測試新聞標題一</a>
    <p class="layer" style=" display:none;">
     <a href="#">這裡顯示彈出層</a>
    </p>
   </li>
   <li><a href="#">測試新聞標題一</a>
    <p class="layer" style=" display:none;">
     <a href="#">這裡顯示彈出層</a>
    </p>
   </li>
   <li><a href="#">測試新聞標題一</a>
    <p class="layer" style=" display:none;">
     <a href="#">這裡顯示彈出層</a>
    </p>
   </li>
   <li><a href="#">測試新聞標題一</a>
    <p class="layer" style=" display:none;">
     <a href="#">這裡顯示彈出層</a>
    </p>
   </li>
  </ul>
 </p>
 <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);
  }
 
摘自 采菊東籬下
 

 

發佈留言