给你介绍下css的伪类。
a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {}/* 当有鼠标悬停在链接上 */
a:active {} /* 被选择的链接 */
但是你说的img实现的不如用css的background来实现更容易些，不过你还需要准备这六块鼠标放在上面变灰的图片。当鼠标悬停在某张图片时，背景自动换成灰的。
可以使用csshover.htc文件。是国外一名作者写的，用于解决低版本IE不支持a以外的元素使用:hover 、:active 伪类的问题。
简单的说下使用方法：
下载csshover.htc文件至网站目录，然后在CSS文件中引用它就好了。
如：
li:hover {
color:red
behavior:url(csshover.htc)
}
亦或者建立一个标签组来应用它：
div , li , h1 , h2 {
behavior:url(csshover.htc)
}
这样你就不用在每一个需要应用的元素内部写代码了。
建议：
尽量用具体的选择器，避免用*号。建议的写法如下：
#nav ul li ,#sidebar ul li , #page-nav .menu span {
behavior:url(csshover.htc)
}
这样写，可以避免程序历遍整个网页所带来的资源消耗。
推荐中小型网站使用。大型网站谨慎使用，尽可能使用js解决hover兼容问题。
更多的使用方法，可以在网上搜一下，有很多文章可供参考。
文件下载请去原作者网站：http://peterned.home.xs4all.nl/csshover.html
按照你这样的布局是要配合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>
这样就解决了
希望对你有所帮助！
