Text on mouseover like youtube

Question

當鼠標移過它們時，如何在圖像上顯示文字。

例如，您在YouTube上看到在縮略圖上添加了播放列表按鈕。我怎樣才能設置類似的東西，但像一個按鈕。

我不是在尋找工具提示。當鼠標懸停在圖像上時，我希望文本顯示在圖像上。您正在尋找tipsy

Answer 1

把你的每個圖像放在一個單獨的「容器」div中。這些div應該具有相對屬性的位置。給所有的圖像類名'singleImage'把這個每個「容器」div的另一個div放在position：absolute和display none中。將這些div的類名稱設置爲'toolTip'。這個div將是工具提示。在圖片上放置一個標題屬性。你需要的jQuery來搭起懸停或普通的JavaScript，如果你喜歡冒險

在jQuery中，你會做這樣的事情：如果你正在尋找的東西

$('.singleImage').mouseover(function(){ 
    var tt = $(this).parent().find('.toolTip'); 
    tt.html($(this).attr('title')); 
    tt.show(); 
}); 
$('.singleImage').mouseout(function(){ 
    var tt = $(this).parent().find('.toolTip'); 
    tt.hide(); 
}); 

Answer 2

我覺得

Answer 3

你指的是被稱爲「工具提示」的功能。有很多不同的插件可以在那裏使用。沒有特定的代碼，任何人都很難提供量身定製的解決方案。