JQuery - 在悬停上显示其他图片

我在练习JS/JQuery并试图创建一个体育网站，其中显示一个小球员图像和一些旁边的统计数据。当这个小图像翻转时，我想要一个不同的大图像出现在右边。JQuery - 在悬停上显示其他图片

图像和播放器信息都在表格中。两张图片都在表格内。我想要在悬停上显示的图像设置为显示：无。

我可以使图像出现，但是当1个缩略图被徘徊时它们全都出现在堆栈中。

下面是HTML的一个小样本：

<table id="roster"> 
    <tr> 
     <th class="title" colspan=4>St. Louis Blues 2013-2014 Roster</th> 
    </tr> 
    <tr> 
     <th class="positions" colspan=2>Forwards</th> 
    </tr> 
    <tr> 
     <th></th> 
     <th>Player</th> 
     <th>Shoots</th> 
     <th>Acquired</th> 
    </tr> 
    <tr> 
     <td><span class="large" style="position:absolute;margin-left:550px;display:none;"><img src="images/backes_large.jpg" width="500px" /></span><span class="small"><img src="images/backes_small.png" alt="david backes" width="70px" /></span> 
     </td> 
     <td>David Backes "C"</td> 
     <td>Right</td> 
     <td>2003</td> 
    </tr> 
    <tr> 
     <td><span class="large" style="position:absolute;margin-left:550px;display:none;"><img src="images/berglund_large.jpg" width="500px" /></span><span class="small"><img src="images/berglund_small.png" alt="patrik berglund" width="70px" /></span> 
     </td> 
     <td>Patrik Berglund</td> 
     <td>Left</td> 
     <td>2006</td> 
    </tr> 
</table>

的脚本是：

$('span.small').hover(
    function() { 

     $('span.large').show(); 
    }, 
    function() { 
     $('span.large').hide; 
    }); 
});

很显然，我想打开额外的形象，是仅在该表行。这是我卡住的地方。任何帮助，将不胜感激。

来源

2013-10-31 Matt

u能告诉我们一个js小提琴 –

所有这些都会显示，因为您使用的是span.large，并且有多个。相反，使用$(this).prev()作为相关跨度来隐藏/显示。

$('span.small').hover(
    function() { 
     $(this).prev('span.large').show(); 
    }, 
    function() { 
     $(this).prev('span.large').hide(); 
    }); 
});

而且，你错过了最后一行括号()

来源

2013-10-31 15:29:18 Krishna

谢谢！这工作。 – Matt

@ user2941938 - 很高兴提供帮助。也upvote有用的答案。（无耻的，不是我:)） – Krishna

JQuery - 在悬停上显示其他图片

回答

相关问题