js滑鼠懸浮出現遮罩層的方法_javascript技巧

本文實例講述了js滑鼠懸浮出現遮罩層的方法。分享給大家供大家參考。具體實作方法如下：

html頁面代碼：

複製程式碼 程式碼如下:

 


 


 


 


 
       
•  
          科學
 
       
•    
          動畫
 
       
•  

        生活  
       

          插畫

 

       

 

        音樂          

          自然

  js程式碼：

複製程式碼


程式碼如下:

                //alert(indexs 1);                  $(this).prev().css("height", "30");                  $(this).next().css("height", "30");              }, function () {                  $site_li.css("height", "50");              });          });   
css程式碼：

複製程式碼程式碼如下：

ul li{ list-style:none;} 

ul li{ list-style:none;} 
.site-tag{ 寬度:200px;溢位：隱藏； z-index:5;} 
.site-tag li{ 位置:相對;寬度：200px；高度：50px；下邊距：1px；溢出：隱藏；  
過渡：高度0.5s緩動； -webkit-transition:高度 0.5s 緩和；  
-moz-transition：高度0.5s緩和； -o-transition:高度 0.5s 緩動;} 
.site-tag li a { 顏色：#666;字體大小：16px；字體粗細：粗體；行高：50px；} 
.site-tag li i{ 顯示：阻止；高度：90px；背景位置：中心中心； 
不透明度：0.3；濾鏡：alpha（不透明度=3）；  /*設定透明度*/ 
-webkit-transition：不透明度 0.5 緩和；   /**/ 
-webkit-filter:灰階(60%);         /**/ 
} 
.site-tag li:hover i { 不透明度:0.9; -webkit-filter:灰階(0%);過渡：不透明度 0.5 秒緩和；} 
.tag-tit{ 顯示：塊；高度：100px；寬度：700px；顏色：#666；字體大小：14px;}                 .site-tag li .tag-tit{ 位置：絕對；頂部：0px；左：10px；文字陰影：1px 1px 1px rgb(0,0,0,0.1);} 

a:hover .tag-tit{ text-shadow:1px 1px 1px rgb(0,0,0,0.5);}

希望本文對大家介紹的javascript程式設計有幫助。