按照你这样的布局是要配合js才可以的，还有你的html代码有点问题，不符合规范，一般都是<li>包含<a>的，你为什么不从html上解决呢？
像这样
<ul class="no_style_ul"><li class="index"><a href="">首页</a></li>
</ul>
然后css像下面这样
<style>.no_style_ul li.index{ float:leftwidth:宽height:高background:url(你的那张ico背景图) left center no-repeatpadding-left:你那张ico的宽+5px}
.no_style_ul li.index:hover{background:url(变了颜色的ico背景图) left center no-repeat}
</style>
这样就解决了
希望对你有所帮助！
元素添加hover伪类选择器时候一定要 紧贴 这hover， 不能有空格 ，有空格的话表示给该元素的所有子元素设置里hover样式。
错误例子：
ul :hover{} //ul的所有子元素设置了hover样式
正确例子：
ul:hover{} //ul会显示出想要的效果
ul:hover .one{// 子元素写在hover后面空格隔开
transform:rotateY(90deg)
}
ul:hover .two{
transform:rotateY(0deg)
}
ul:hover .thr{
transform:rotateY(360deg)
}
仅可以给自身的子元素设置样式 ，给其他元素子元素设置无效
接着上个例子举例子：
div:hover .one{}//不显示任何效果，hover失效
给兄弟元素设置：
ul:hover+.one
ul li:hover{color:#fff} //表示选中li的时候颜色是白色ul hover:li{color:#fff}//不存在这种写法，错误的。
ul:hover li{color:#fff}//选中ul的时候，他里面的li颜色是白色
你要表达的是不是1和3的不同点？
有问题再追问把。希望能帮到你，有用就采纳！
