jsマウスを使ってマスクレイヤーを表示する方法_javascriptスキル

この記事の例では、JS マウスをホバーしたときにマスク レイヤーを表示する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

HTML ページのコード:

コードをコピー コードは次のとおりです:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

jsコード:





コードをコピー


コードは次のとおりです。

css代コード：

复制代 代码如下:

ul li{ list-style:none;}
.site-tag{ 幅:200px;オーバーフロー:非表示; z-index:5;}
.site-tag li{ 位置:相対;幅:200ピクセル;高さ:50ピクセル;マージン-ボトム:1px;オーバーフロー:非表示;  
トランジション:高さ 0.5 秒の容易さ。 -webkit-transition:高さ 0.5 秒の容易さ;  
-moz-transition:高さ 0.5 秒の容易さ; -o-transition:height 0.5 秒の容易さ;}
.site-tag li a { color: #666;フォントサイズ: 16px;フォントの太さ: 太字;行の高さ: 50px;}
.site-tag li i{表示:ブロック;高さ:90ピクセル;背景位置:中央中央; 
不透明度:0.3;フィルター:アルファ(不透明度=3);  /*設置透明度*/
-webkit-transition:opacity 0.5 容易度;   /**/
-webkit-filter:グレースケール(60%);         /**/
}
.site-tag li:hover i { 不透明度:0.9; -webkit-filter:グレースケール(0%);トランジション:不透明度 0.5 秒の容易さ;}
.tag-tit{ 表示:ブロック;高さ:100ピクセル;幅:700ピクセル;色:#666; font-size:14px;}
.site-tag li .tag-tit{ 位置:絶対;上:0px;左:10ピクセル; 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 プログラムの設計が役立つことを望みます。