首页 文章

jquery mouseover / mouseleave迭代?

提问于
浏览
0

我在图像上有鼠标悬停和鼠标移动,它将隐藏或显示div . 所有的图像都在一个“imgmouse”类中,并且所有的div都在一个类“tri-bottom”中,我怎么能写这个jquery所以第一个tri-img将显示并隐藏第一个三底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>

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();
        }
    });
    

相关问题