html代码
<ul class="ind_nav"><li>
<a href="#indnav_zyys" style="display: block;width: 100%;height: 100%;"></a>
</li>
<li>
<a href="#indnav_jwcj" style="display: block;width: 100%;height: 100%;"></a>
</li></ul>
<div id=”indnav_zyys”></div>
<div id=”indnav_jwcj”></div>
scss代码
.ind_nav li {width: 131px;height: 150px;background: url(background-position切图切出来的已点和未点的整个nav图);background-size: 340px 308px;float: left;margin: 13px 0 0 -5px;display: block;cursor: pointer;
}
.ind_nav li:nth-of-type(1) {background-position: 0 0;
}
.ind_nav li:nth-of-type(1):hover {background-position: 0 150px;
}
.ind_nav li:nth-of-type(2) {margin-left: 78px;background-position: 131px 0;
}
.ind_nav li:nth-of-type(2):hover {background-position: 131px 151px;
}