正常效果图
悬停效果图
点击效果图(鼠标移开后的效果,点击任意别的图标恢复最初样式)
不可用效果图(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>标签下划线)