So verwenden Sie die JS-Maus, um maskierte Layer_Javascript-Fähigkeiten anzuzeigen

Das Beispiel in diesem Artikel beschreibt, wie eine Maskenebene angezeigt wird, wenn Sie mit der js-Maus darüber fahren. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

HTML-Seitencode:

Code kopieren Der Code lautet wie folgt:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

js-Code:





Code kopieren


Der Code lautet wie folgt:

css代码：

复制代码 代码如下:

ul li{ list-style:none;} 
.site-tag{ width:200px; Überlauf:versteckt; z-index:5;} 
.site-tag li{ position:relative; Breite:200px; Höhe:50px; margin-bottom:1px; Überlauf:versteckt;  
Übergang: Höhe 0,5 s Leichtigkeit; -webkit-transition:height 0,5s Leichtigkeit;  
-moz-transition:height 0,5s Leichtigkeit; -o-transition:height 0,5s Leichtigkeit;} 
.site-tag li a { color: #666; Schriftgröße: 16px; Schriftstärke: fett; Zeilenhöhe: 50 Pixel;} 
.site-tag li i{ display:block; Höhe:90px; Hintergrundposition:Mitte Mitte; 
Deckkraft:0,3; filter:alpha(opacity=3);  /*设置透明度*/ 
-webkit-transition:Opacity 0,5 Ease;   /**/ 
-webkit-filter:Graustufen(60%);         /**/ 
} 
.site-tag li:hover i { opacity:0.9; -webkit-filter:Graustufen(0%); Transition:Opacity 0,5s Leichtigkeit;} 
.tag-tit{ display:block; Höhe: 100 Pixel; Breite:700px; Farbe:#666; Schriftgröße:14px;}                  
.site-tag li .tag-tit{ position:absolute; oben:0px; links: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程序设计有所帮助.