JQuery - 在悬停时显示附加图像

Question

我正在练习 JS/JQuery 并尝试创建一个体育网站，该网站显示一个小的球员图像和旁边的几个统计数据。当这个小图像被翻转时，我想要一个不同的大图像出现在右边。

图像和播放器信息在表格中。两张图片都在表格内。我想在悬停时显示的图像设置为 display:none。

我可以让图像出现，但是当悬停 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;
    });
});

显然我想打开仅在该表行中的附加图像。这就是我卡住的地方。任何帮助将不胜感激。

Answer 1

它们都会出现，因为您使用的是span.large，并且它们有多个。而是使用$(this).prev() 来隐藏/显示相关范围。

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

另外，您在最后一行缺少括号 ()