0

divを非表示または表示する画像にマウスオーバーとマウスリーブがあります。すべての画像はクラス "imgmouse" にあり、すべての div はクラス "tri-bottom" にあります。最初の tri-img が最初の tri-bottom div を表示および非表示にするように、この jquery を作成するにはどうすればよいでしょうか。最初の .imgmouse img にマウスを合わせて div.triangle-rollover を表示し、2 番目の .imgmouse img にマウスを合わせて 2 番目の 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>
4

1 に答える 1

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();
    }
});
于 2011-04-09T21:47:02.313 に答える