jQuery mouseover/mouseleave iterating?

Question

У меня есть указатель мыши и мышь на изображении, которое скроет или покажет div. Все изображения находятся в классе «imgmouse», и все div находятся в классе «tri-bottom», как я могу написать этот jquery, чтобы первый три-img отобразил и спрятал первый три-нижний div и так далее. Так что мышь над первым .imgmouse img и показать div.triangle-rollover и mouseover второй .imgmouse img и показать второй div.triangle-rollover ??

Код:

 $('.imgmouse img, .tri-col td.tri-img span').mouseover(function() { 
     $(".triangle-rollover").show(); 
    }); 
    $('.imgmouse img, .tri-col td.tri-img span').mouseleave(function() { 
     $(".triangle-rollover").hide(); 
    }); 

это относится к этой таблице:

<td class="tri-img"><img class="one" src="img/triangles/triangle33.png" alt="" ><span class="tri-val one">${StatsCube.parseInt(ChartData.PTS)}</span></td> 
<td class="tri-img"><img class="two" src="img/triangles/triangle33.png" alt="" ><span class="tri-val two">${StatsCube.parseInt(ChartData.FGA)}</span></td> 
<td class="tri-img"><img class="three" src="img/triangles/triangle33.png" alt="" ><span class="tri-val three">${StatsCube.parseInt(ChartData.TPA)}</span><span>%</span></td> 

Answer 1

Вы можете использовать индекс проецируемых изображений при наведении курсора мыши:

$('.imgmouse img').bind('mouseover mouseout', function(e) { 
    var index = $('.imgmouse img').index(this), 
     $div = $('.tri-bottom div').eq(index); 
    if(e.type == 'mouseout') { 
     $div.hide(); 
    } else { 
     $div.show(); 
    } 
});