html + scss 描点点击跳转，hover底部图片转换样式

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;
}