js鼠标悬浮出现遮罩层的方法
本文实例讲述了js鼠标悬浮出现遮罩层的方法。分享给大家供大家参考。具体实现方法如下：
html页面代码：
<ulclass="site-tagfl">
<li><adata-title="科学"href="#"><istyle="background-image:url(images/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i><spanclass="tag-tit">科学</span></a></li>
<li><adata-title="动漫"href="#"><istyle="background-image:url(images/xiaozhan/main_NH8v_2e310001ebd1118e.jpg)">
</i><spanclass="tag-tit">动漫</span></a></li>
<li><adata-title="生活"href="#"><istyle="background-image:url(images/xiaozhan/main_OtnR_43a60000050a118c.jpg)">
</i><spanclass="tag-tit">生活</span></a></li>
<li><adata-title="插画"href="#"><istyle="background-image:url(images/xiaozhan/main_UD3z_2e510002074f118e.jpg)">
</i><spanclass="tag-tit">插画</span></a></li>
<li><adata-title="音乐"href="#"><istyle="background-image:url(images/xiaozhan/main_krFk_6323000018bd125d.jpg)">
</i><spanclass="tag-tit">音乐</span></a></li>
<li><adata-title="自然"href="#"><istyle="background-image:url(images/xiaozhan/main_UAbs_764f0001ff601190.jpg)">
</i><spanclass="tag-tit">自然</span></a></li>
</ul>js代码：
<scripttype="text/javascript">
$(function(){
//遮罩层，鼠标移动上去高度变化，变清晰
var$site_li=$(".site-tagli");
$site_li.hover(function(){
varindexs=$site_li.index(this);
$(this).css("height","90").find(".tag-tit").css("top","30").css("color","#fff");
//获取当前点击li元素在全部li元素中的索引
//alert(indexs+1);
$(this).prev().css("height","30");
$(this).next().css("height","30");
},function(){
$site_li.css("height","50");
});
});
</script>css代码：
ulli{list-style:none;}
.site-tag{width:200px;overflow:hidden;z-index:5;}
.site-tagli{position:relative;width:200px;height:50px;margin-bottom:1px;overflow:hidden;
transition:height0.5sease;-webkit-transition:height0.5sease;
-moz-transition:height0.5sease;-o-transition:height0.5sease;}
.site-taglia{color:#666;font-size:16px;font-weight:bold;line-height:50px;}
.site-taglii{display:block;height:90px;background-position:centercenter;
opacity:0.3;filter:alpha(opacity=3); /*设置透明度*/
-webkit-transition:opacity0.5ease; /**/
-webkit-filter:grayscale(60%); /**/
}
.site-tagli:hoveri{opacity:0.9;-webkit-filter:grayscale(0%);transition:opacity0.5sease;}
.tag-tit{display:block;height:100px;width:700px;color:#666;font-size:14px;}
.site-tagli.tag-tit{position:absolute;top:0px;left:10px;text-shadow:1px1px1pxrgb(0,0,0,0.1);}
a:hover.tag-tit{text-shadow:1px1px1pxrgb(0,0,0,0.5);}
希望本文所述对大家的javascript程序设计有所帮助。