利用改变:before元素透明度图标选中效果

.footer-menu{
  width:100%;
  height:50px;
  border-top: $border;
  position: fixed;
  z-index: 100;
  bottom: 0;

  li{
	width:33.33%;
	float: left;
	font-size: 1rem;
	color:$font-color-grey;

	div{
	  text-align: center;
	}
  }

  .footer-menu-icon{
	height: 2.2rem;
	margin-top: .5rem;
  }

  .on{
	&:before{
	  opacity:0;
	}
  }

  .icon-home{
	position: relative;
	background: url(../../../images/wap/lawFirm/home-on-2x.png) no-repeat center;
	background-size: 2.1rem 2rem;

	&:before{
	  display: block;
	  content:"";
	  width: 100%;
	  height:100%;
	  position: absolute;
	  top:0;
	  left:0;
	  background: url(../../../images/wap/lawFirm/home-off-2x.png) no-repeat center;
	  background-size: 2.1rem 2rem;
	}
  }

  .icon-dial{
	position: relative;
	background: url(../../../images/wap/lawFirm/dial-on-2x.png) no-repeat center;
	background-size: 2.1rem 2rem;

	&:before{
	  display: block;
	  content:"";
	  width: 100%;
	  height:100%;
	  position: absolute;
	  top:0;
	  left:0;
	  background: url(../../../images/wap/lawFirm/dial-off-2x.png) no-repeat center;
	  background-size: 2.1rem 2rem;
	}
  }

  .icon-consult{
	position: relative;
	background: url(../../../images/wap/lawFirm/consult-on-2x.png) no-repeat center;
	background-size: 2.1rem 2rem;

	&:before{
	  display: block;
	  content:"";
	  width: 100%;
	  height:100%;
	  position: absolute;
	  top:0;
	  left:0;
	  background: url(../../../images/wap/lawFirm/consult-off-2x.png) no-repeat center;
	  background-size: 2.1rem 2rem;
	}
  }

转载于:https://my.oschina.net/u/3486447/blog/1862835