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

使用jQuery幻灯片，如何使用mouseenter / hover显示字幕？

1 个答案: