jquery mouseover/mouseleave 迭代？

Question

我在图像上有一个 mouseover 和 mouseleave，它将隐藏或显示一个 div。所有图像都在“imgmouse”类中，所有 div 都在“tri-bottom”类中，我该如何编写这个 jquery 以便第一个 tri-img 将显示和隐藏第一个 tri-bottom div 等等。所以将鼠标悬停在第一个 .imgmouse img 上并显示 div.triangle-rollover 并将鼠标悬停在第二个 .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();
    }
});