jQuery 슬라이드 쇼에서 mouseenter/hover로 자막을 표시하는 방법은 무엇입니까?

Question

저는 jQuery를 처음 접했고 현재 저는 작은 웹 사이트를 만들고있는 학교 프로젝트에 참여하고 있습니다. 이 프로젝트는 기본 레벨에서 독립적으로 jQuery를 이해하고 사용할 수 있다는 것을 보여주기 때문에 어떤 플러그인도 사용할 수 없다고 생각합니다.

어쨌든, 나는 (Snook's "Simplest jQuery Slideshow" Tutorial의 도움으로) 간단한 슬라이드 쇼를 만들었습니다.

이제이 슬라이드 쇼에 몇 가지 기능을 추가하겠습니다. 마우스 오버시 또는 캡쳐 화면에 캡션을 표시하는 것과 같은 방법으로 캡션을 사용하고 싶습니다. 나는 다양한 것을 검색하고 테스트 해 보았지만, 아직 해결책을 찾기에는 충분하지 못하다. "다른 컨텍스트에 코드를 적용하는 것"은 이 일 수 있다는 것을 찾는 것과 마찬가지로 나에게도 잘 작동합니다.

이미지를 가져 오는 동안 캡션을 표시하려면 어떤 솔루션이 가장 좋을까요? 나는 코드가 너무 복잡하지 않은 한 열린 마음을 가지고 있습니다.

다음은 HTML입니다.

일부 텍스트

<div id="gallery"> 
    <img src="img/gallery0.jpg" /> 
    <img src="img/gallery1.jpg" /> 
    <img src="img/gallery2.jpg" /> 
    <img src="img/gallery3.jpg" /> 
    <img src="img/gallery4.jpg" /> 
</div> 

그리고 jQuery를 : 방법이 슬라이드 쇼는 작품

$('#gallery img:gt(0)').hide(); //Hiding all but the first img 

setInterval(function() { 
    $('#gallery :first-child').fadeOut().next('img').fadeIn().end().appendTo('#gallery'); 
//Fade out first image, fade in the next and add the first image to the end of #gallery 
}, 4000); 

참조하려면, 여기 내 JSFiddle입니다.

나는 일종의 꿈에서 살아 왔음에 틀림 없다.

$('#caption').hide(); 
$('#gallery').mouseenter(function(){ 
    $('#caption').show(); 
}); 

Answer 1

$('#caption').show(); you missed '$' 

$('#gallery').mouseenter(function(){ 
    $('#caption').show(); 
});