在悬停的图像上显示图层/ 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