在懸停的圖像上顯示圖層/ div與圖像上的鏈接

Question

我們正試圖模仿IBM上的內容 - 請參閱圖像框（讓我們構建一個更智能的行星箱），當它移動時，顯示帶有鏈接的圖層。

任何幫助/引用高度讚賞。

謝謝！ K

Answer 1

你需要的是一個JavaScript工具提示插件。 嘗試google「jquery tooltip插件」。

一個不錯的插件是flowplayer tooltip plugin（howto，download）。你可以在工具提示框中自定義html。

Answer 2

這是相當普遍的效果。他們有一個滾動窗格隱藏，絕對定位容器.ibm-expand-overlay。他們都包裹在相對定位div。在窗格子項的mouseenter上觸發效果，在他們的情況下.ibm-columns

$('.ibm-columns').mouseenter(function() { 

    //some positioning logic is needed here 
    //probably $('.ibm-expand-overlay').css('left', $(this).index() * childWidth) is sufficient enought 

    $('.ibm-expand-overlay').fadeIn(); 
}); 

$('.ibm-expand-overlay').mouseleave(function() { $(this).fadeOut(); }); //to hide on mouseleave