Comment utiliser la souris js pour afficher les compétences de masque layer_javascript

L'exemple de cet article décrit comment afficher un calque de masque lors du survol de la souris js. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Code de la page html :

Copier le code Le code est le suivant :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

code js :





Copier le code


Le code est le suivant :

css代码：

复制代码 代码如下 :

ul li{ list-style:none;} 
.site-tag{largeur : 200 px ; débordement : caché ; indice z : 5;} 
.site-tag li{ position:relative; largeur : 200 px ; hauteur : 50 px ; marge inférieure : 1 px ; débordement : caché ;  
transition : hauteur 0,5 s de facilité ; -webkit-transition : hauteur de facilité de 0,5 s ;  
-moz-transition : hauteur de facilité de 0,5 s ; -o-transition : hauteur 0,5 s facilité ;} 
.site-tag li a { couleur : #666 ; taille de police : 16 px ; poids de la police : gras ; hauteur de la ligne : 50 px ;} 
.site-tag li{ display:block; hauteur : 90 px ; position d'arrière-plan : centre central ; 
opacité : 0,3 ; filtre:alpha(opacité=3);  /*设置透明度*/ 
-webkit-transition : opacité 0,5 facilité ;   /**/ 
-webkit-filter: niveaux de gris (60 %);         /**/ 
} 
.site-tag li:hover i { opacité:0.9; -webkit-filter: niveaux de gris (0%); transition : opacité 0,5 s facilité ;} 
.tag-tit{ display:block; hauteur : 100 px ; largeur : 700 px ; couleur : #666 ; font-size:14px;}                  
.site-tag li .tag-tit{ position:absolute; haut :0px ; gauche : 10 px ; 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程序设计有所帮助。