使用jQuery幻燈片，如何使用mouseenter/hover顯示字幕？

我對jQuery相當陌生，現在我正在開展一個學校項目，我正在製作一個小型網站。我不認爲我們被允許使用任何插件，因爲這個項目是關於顯示我們可以在基本級別獨立理解和使用jQuery。使用jQuery幻燈片，如何使用mouseenter/hover顯示字幕？

無論如何，我管理（在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(); 
});

來源

2013-03-19 mizuki

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

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

來源

2013-03-19 10:58:36 sasi

哦，錯字。即使使用$，它仍然無法正常工作。 – mizuki 2013-03-19 11:01:39

@Erika你可以提供你的小提琴.. – sasi 2013-03-19 11:18:49

http://jsfiddle.net/8tkEM/ 剛剛添加了2個隨機圖像，所以你可以看到它是如何工作的。 – mizuki 2013-03-19 11:30:26

使用jQuery幻燈片，如何使用mouseenter/hover顯示字幕？

回答

相關問題