使用 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();
});