图片与文字产生联动效果，外带不可用效果（disabled）

正常效果图

悬停效果图

点击效果图（鼠标移开后的效果，点击任意别的图标恢复最初样式）

不可用效果图（disabled）

代码

html部分

<a class="a-v2 a-message-v2 " href="#"><i class="icon-fixed-route-v2"></i>设为固定路线</a>（如需启用disabled状态，直接在
a-message-v2后输入disabled即可，删除则显示正常状态）
css部分
//设置字体颜色
.a-v2{color: #02b300;}
.a-v2:hover,.a-v2:active,.a-v2:focus{color: #02B300;text-decoration: none;}
.a-message-v2{color: #666666}
.a-message-v2:hover,.a-message-v2:active,.a-message-v2.active{color:#02b300;text-decoration: none;}
.disabled{color:  #CCCCCC}
.disabled:hover{ color: #CCCCCC}
//获取图片并设置相应效果
.icon-fixed-route-v2{background-position: -246px -654px;}
.a-message-v2:hover .icon-fixed-route-v2{background-position: -246px -678px;}
.a-message-v2:focus .icon-fixed-route-v2{background-position: -246px -678px;}
.disabled  .icon-fixed-route-v2,.a-message-v2.disabled:hover  .icon-fixed-route-v2{background-position: -246px -702px; }
注解：
text-decoration: none;（消除<a>标签下划线）