JQuery - Show Additional Image on Hover

Question

I am practicing JS/JQuery and trying to create a sports web site that shows a small player image and a couple of stats next to it. When this small image is rolled over, I want a different large image to appear to the right.

The images and player info are in a table. Both images are within the table. The image that I want to appear on hover is set to display:none.

I can make the images appear but they all appear in a stack when 1 thumbnail is hovered.

Here is a small sample of the 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>

The script is:

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

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

Obviously I want to open the additional image that is only in that table row. This is where I am stuck. Any help would be appreciated.

Answer 1

All of them will appear because you're using span.large and there are multiple of them. Instead use $(this).prev() for the related span to hide/show.

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

Also, you're missing the parentheses () in the last line