This article describes the method of surfing the mask layer in js mouse. Share it for your reference. The specific implementation method is as follows:
html page code:
Copy the code as follows: <ul>
<li><a data-title="science" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i><span>Science</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>illustration</span> </a></li>
<li><a data-title="Music" href="#"><i style="background-image: url(images/xiaozhan/main_krFk_6323000018bd125d.jpg)">
</i><span>Music</span> </a></li>
<li><a data-title="natural" href="#"><i style="background-image: url(images/xiaozhan/main_UAbs_764f0001ff601190.jpg)">
</i><span>Natural</span> </a></li>
</ul>
js code:
Copy the code as follows:<script type="text/javascript">
$(function () {
//The mask layer, the height changes when the mouse moves up, and becomes clearer
var $site_li = $(".site-tag li");
$site_li.hover(function () {
var indexs = $site_li.index(this);
$(this).css("height", "90").find(".tag-tit").css("top", "30").css("color", "#ffff");
//Get the index of the current click li element in all li elements
//alert(indexs+1);
$(this).prev().css("height", "30");
$(this).next().css("height", "30");
}, function () {
$site_li.css("height", "50");
});
});
</script>
css code:
Copy the code as follows: ul li{ list-style:none;}
.site-tag{ width:200px; overflow:hidden; z-index:5;}
.site-tag li{ position:relative; width:200px; height:50px; margin-bottom:1px; overflow:hidden;
transition:height 0.5s ease; -webkit-transition:height 0.5s ease;
-moz-transition:height 0.5s ease; -o-transition:height 0.5s ease;}
.site-tag li a { color: #666; font-size: 16px; font-weight: bold;line-height: 50px;}
.site-tag li i{ display:block; height:90px; background-position:center center;
opacity:0.3; filter:alpha(opacity=3); /*Set transparency*/
-webkit-transition:opacity 0.5 ease; /**/
-webkit-filter:grayscale(60%); /**/
}
.site-tag li:hover i { opacity:0.9; -webkit-filter:grayscale(0%); transition:opacity 0.5s ease;}
.tag-tit{ display:block; height:100px; width:700px; color:#666; font-size:14px;}
.site-tag li .tag-tit{ position:absolute; top:0px; left: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);}
I hope this article will be helpful to everyone's JavaScript programming.