请教jquery循环每个ico的问题

Question

html代码:
<dl>
   <dt><a><i class="clIco"></i>服装鞋帽</a></dt>
   <dd>
      <a>女装</a>
      <a>男装</a>
      <a>童装</a>
      <a>运动品牌</a>
   </dd>
</dl>
<dl>
   <dt><a><i class="itIco"></i>电脑办公</a></dt>
   <dd>
      <a>女装</a>
      <a>男装</a>
      <a>童装</a>
      <a>运动品牌</a>
   </dd>
</dl>
.....css代码：
.clIco{ width:9px; height:5px; background:url(../images/clIco.png) no-repeat;}
.clIcoCur{ background:url(../images/clIcoCur.png) no-repeat;}
.itIco{ width:9px; height:5px; background:url(../images/itIco.png) no-repeat;}
.itIcoCur{ background:url(../images/itIcoCur.png) no-repeat;}jquery代码怎么写，需要的效果是鼠标移到相应的dl上时其对应的Ico变成相应的IcoCur,比如第一个dl的图标是clIco（服装鞋帽的），当鼠标移到服装鞋帽的dl时，clIco的class变成clIcoCur，移出反之。第二的图标是itIco(电脑办公)，当鼠标移到电脑办公的dl时，itIco的class变成itIcoCur，移出反之。具体怎么操作，请指点下jquery js htmlcss

Answer 1

$(".clIco").parent().parent().parent().hover(function(){
    $(this).find(".clIco").removeClass("clIco").addClass("clIcoCur");
},function(){
    $(this).find(".clIcoCur").removeClass("clIcoCur").addClass("clIco");
});$(".itIco").parent().parent().parent().hover(function(){
    $(this).find(".itIco").removeClass("itIco").addClass("itIcoCur");
},function(){
    $(this).find(".itIcoCur").removeClass("itIcoCur").addClass("itIco");
});

Answer 2

能否有更节约性能的方式，因为要是10几个ico都用hover的话，很浪费性能的。

Answer 3

$('dl').each(function(i){
$(this).hover(function(){
$('i',this).removeClass().toggleClass(function(){
return 'ico-' + i;
});
},function(){
$('i',this).removeClass().toggleClass(function(){
return 'ico' + i;
});
});
});
不过需要修改 class。默认的 class 为 ico0，ico1...
鼠标移入 class 改为 ico-0，ico-1......