在悬停时在图像上显示带有链接的图层/div答案

【问题标题】：Show layer/div with links over an image on hover在悬停时在图像上显示带有链接的图层/div
【发布时间】：2011-08-29 06:59:20
【问题描述】：

我们正在尝试模仿 IBM 上的内容 - 请参阅图像框（让我们构建一个更智能的星球框），当移动器经过时，会显示一个带有链接的层。

高度赞赏任何帮助/参考。

谢谢！克

【问题讨论】：

标签： javascript jquery html layer

【解决方案1】：

您需要的是一个 javascript 工具提示插件。试试谷歌“jquery tooltip plugin”。

一个好的插件是flowplayer tooltip plugin (howto, download)。您可以在工具提示框中自定义 html。

【讨论】：

【解决方案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

【讨论】：