JSマウスサスペンションのときにマスキング層の表示方法

この記事では、JSマウスのマスク層をサーフィンする方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。

HTMLページコード：

次のようにコードをコピーします：<ul>

<li> <a data-title = "science" href = "＃"> <i style = "background-image：url（images/xiaozhan/main_ojls_1aa6000200891260.jpg）">

</i> <span>科学</span> </a> </li>

<li> <a data-title = "animation" href = "＃"> <i style = "background-image：url（images/xiaozhan/main_nh8v_2e310001ebd1118e.jpg）">

</i> <span> anime </span> </a> </li>

<li> <a data-title = "life" href = "＃"> <i style = "background-image：url（images/xiaozhan/main_otnr_43a60000050a118c.jpg）">

</i> <span> life </span> </a> </li>

<li> <A Data-Title = "Illustration" href = "＃"> <i style = "background-image：url（images/xiaozhan/main_ud3z_2e510002074f118e.jpg）">

</i> <span>イラスト</span> </a> </li>

<li> <a data-title = "music" href = "＃"> <i style = "background-image：url（images/xiaozhan/main_krfk_6323000018bd125d.jpg）">

</i> <span>音楽</span> </a> </li>

<li> <a data-title = "natural" href = "＃"> <i style = "background-image：url（images/xiaozhan/main_uabs_764f0001ff601190.jpg）">

</i> <span>自然</span> </a> </li>

</ul>

JSコード：

次のようにコードをコピーします。<script type = "text/javascript">

$（function（）{

//マスク層、マウスが上昇してより明確になると高さが変化します

var $ site_li = $（ "。site-tag li"）;

$ site_li.hover（function（）{

var indexs = $ site_li.index（this）;

$（this）.css（ "height"、 "90"）

//すべてのli要素で現在のクリックli要素のインデックスを取得します

// alert（indexs+1）;

$（this）.prev（）。css（ "height"、 "30"）;

$（this）.next（）。css（ "height"、 "30"）;

}、 関数 （） {

$ site_li.css（ "height"、 "50"）;

}）;

}）;

</script>

CSSコード：

次のようにコードをコピーします：ul li {list-style：none;}

.site-tag {width：200px;オーバーフロー：隠し; z-index：5;}

.site-tag li {position：relative;幅：200px;高さ：50px;マージンボトム：1px;オーバーフロー：隠し;

遷移：高さ0.5秒の容易さ。 -webkit-transition：高さ0.5秒の容易さ。

-moz-transition：高さ0.5秒の容易さ。 -o-Transition：高さ0.5秒簡単;}

.site-tag li a {color：＃666;フォントサイズ：16px; font-weight：bold; line-height：50px;}

.site-tag li i {display：block;高さ：90px;バックグラウンドポジション：センターセンター。

不透明：0.3;フィルター：アルファ（不透明度= 3）; /*透明度を設定*/

-webkit-transition：不透明度0.5容易さ。 /**/

-webkit-filter：grayscale（60％）; /**/

}

.site-tag li：Hover I {Opacity：0.9; -webkit-filter：grayscale（0％）;トランジション：不透明度0.5s容易さ;}

.tag-tit {display：block;高さ：100px;幅：700px;色：＃666; font-size：14px;}

.site-tag li .tag-tit {position：absolute;上：0px;左：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プログラミングに役立つことを願っています。