js鼠标悬浮出现遮罩层的方法

这篇文章主要介绍了js鼠标悬浮出现遮罩层的方法,以实例形式较为详细的分析了html及css页面布局与js特效的实现方法,是非常实用的技巧,需要的朋友可以参考下

本文实例讲述了js鼠标悬浮出现遮罩层的方法。分享给大家供大家参考。具体实现方法如下：

html页面代码：

复制代码 代码如下:

 
       
•  
          科学

 
       

•  
          动漫

 
       

•  
          生活

 
       

•  
          插画

 
       

•  
          音乐

 
       

•  
          自然

 

js代码：

复制代码 代码如下:
css代码：

复制代码 代码如下:ul li{ list-style:none;} 
.site-tag{ width:200px; overflow:hidden; z-index:5;} 
.site-tag li{ position:relative; width:200px; height:50px; margin-bottom:1px; overflow:hidden;  
transition:height 0.5s ease; -webkit-transition:height 0.5s ease;  
-moz-transition:height 0.5s ease; -o-transition:height 0.5s ease;} 
.site-tag li a { color: #666; font-size: 16px; font-weight: bold;line-height: 50px;} 
.site-tag li i{ display:block; height:90px; background-position:center center; 
opacity:0.3; filter:alpha(opacity=3);  /*设置透明度*/ 
-webkit-transition:opacity 0.5 ease;   /**/ 
-webkit-filter:grayscale(60%);         /**/ 
} 
.site-tag li:hover i { opacity:0.9; -webkit-filter:grayscale(0%); transition:opacity 0.5s ease;} 
.tag-tit{ display:block; height:100px; width:700px; color:#666; font-size:14px;}                  
.site-tag li .tag-tit{ position:absolute; top:0px; left:10px; text-shadow: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程序设计有所帮助。

以上就是js鼠标悬浮出现遮罩层的方法的详细内容，更多请关注本站其它相关文章！