js滑鼠懸浮出現遮罩層的方法_javascript技巧
- WBOY原創
- 2016-05-16 16:17:271273瀏覽
本文實例講述了js滑鼠懸浮出現遮罩層的方法。分享給大家供大家參考。具體實作方法如下：
html頁面代碼：
複製程式碼 程式碼如下:
生活
音樂
自然
js程式碼：
複製程式碼
程式碼如下:
css程式碼：
複製程式碼程式碼如下：
ul li{ list-style:none;}
ul li{ list-style:none;}
.site-tag{ 寬度:200px;溢位：隱藏； z-index:5;}
.site-tag li{ 位置:相對;寬度：200px；高度：50px；下邊距：1px；溢出：隱藏；
過渡：高度0.5s緩動； -webkit-transition:高度 0.5s 緩和；
-moz-transition：高度0.5s緩和； -o-transition:高度 0.5s 緩動;}
.site-tag li a { 顏色：#666;字體大小：16px；字體粗細：粗體；行高：50px；}
.site-tag li i{ 顯示：阻止；高度：90px；背景位置：中心中心；
不透明度：0.3；濾鏡：alpha（不透明度=3）； /*設定透明度*/
-webkit-transition：不透明度 0.5 緩和； /**/
-webkit-filter:灰階(60%); /**/
}
.site-tag li:hover i { 不透明度:0.9; -webkit-filter:灰階(0%);過渡：不透明度 0.5 秒緩和；}
.tag-tit{ 顯示：塊；高度：100px；寬度：700px；顏色：#666；字體大小：14px;} .site-tag li .tag-tit{ 位置：絕對；頂部：0px；左：10px；文字陰影：1px 1px 1px rgb(0,0,0,0.1);}
a:hover .tag-tit{ text-shadow:1px 1px 1px rgb(0,0,0,0.5);}ul li{ list-style:none;}
.site-tag{ 寬度:200px;溢位：隱藏； z-index:5;}
.site-tag li{ 位置:相對;寬度：200px；高度：50px；下邊距：1px；溢出：隱藏；
過渡：高度0.5s緩動； -webkit-transition:高度 0.5s 緩和；
-moz-transition：高度0.5s緩和； -o-transition:高度 0.5s 緩動;}
.site-tag li a { 顏色：#666;字體大小：16px；字體粗細：粗體；行高：50px；}
.site-tag li i{ 顯示：阻止；高度：90px；背景位置：中心中心；
不透明度：0.3；濾鏡：alpha（不透明度=3）； /*設定透明度*/
-webkit-transition：不透明度 0.5 緩和； /**/
-webkit-filter:灰階(60%); /**/
}
.site-tag li:hover i { 不透明度:0.9; -webkit-filter:灰階(0%);過渡：不透明度 0.5 秒緩和；}
.tag-tit{ 顯示：塊；高度：100px；寬度：700px；顏色：#666；字體大小：14px;} .site-tag li .tag-tit{ 位置：絕對；頂部：0px；左：10px；文字陰影：1px 1px 1px rgb(0,0,0,0.1);}
希望本文對大家介紹的javascript程式設計有幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn