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 - 在懸停上顯示其他圖片

回答

相關問題