I want use a custom anchor with icon in my page,

but i cannot using "background" in anchor tag directly because im using a sprite,the code like this:

1. // html
2. <a href="#c1" icon="icon1">icon link1</a>
3. <a href="#c2" icon="icon2">icon link2</a>
4. 
   
5. // css
6. ins{width:16px; height:16px; background-image:sprite.png; background-repeat: no-repeat;}
7. 
   
8. .icon1{background-position:0 0}
9. .icon1:hilight{background-position:0 -16}
10. .icon2{background-position:-16 0}
11. .icon2:hilight{background-position:-16 -16}
12. 
    
13. // js
14. $(document).ready(function()
15. {
16. $('a[icon]').each(function()
17. {
18. var iconclass = $(this).attr('icon');
19. $(this).prepend('<ins class="'+iconclass +'"></ins>');
20. $(this).removeAttr('icon');
21. }
22. }

I want: when i mouseover the link, the icon can " hilight", many thanks for your help!