Maison > interface Web > js tutoriel > Comment utiliser la souris js pour afficher les compétences de masque layer_javascript

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

WBOY
Libérer: 2016-05-16 16:17:27
original
1305 Les gens l'ont consulté

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程序设计有所帮助。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal