JQuery - 호버에 추가 이미지 표시

Question

JS/JQuery를 연습하고 옆에 작은 플레이어 이미지와 몇 개의 통계를 보여주는 스포츠 웹 사이트를 만들려고합니다. 이 작은 이미지를 마우스로 가져 가면 다른 큰 이미지가 오른쪽에 나타나기를 원합니다.

이미지와 플레이어 정보가 테이블에 있습니다. 두 이미지는 테이블 내에 있습니다. 마우스를 올리면 나타나는 이미지는 표시 : 없음으로 설정됩니다.

이미지를 표시 할 수 있지만 1 개의 축소판을 올리면 이미지가 모두 스택에 표시됩니다.

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

은 분명히 내가 해당 테이블 행에 추가 이미지를 열려면

다음은 HTML의 작은 샘플입니다. 이것은 내가 붙어있는 곳이다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

span.large을 사용하고 있고 그 중 다수가 있기 때문에이 모두가 표시됩니다. 대신 숨기기/표시 할 관련 기간에 $(this).prev()을 사용하십시오.

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

또한, 당신은 마지막 줄에 괄호 ()