0

我正在制作一个 facebook 应用程序并与 iframe 中的 facebook 设计流程保持一致，我正在“复制”一些 facebook 功能。我遇到的问题是使用父背景图像的带有箭头的悬停卡弹出对话框。

在下面的链接中，您将看到我正在尝试做的事情。 http://grab.by/k9Na

在该图片中，我使用了 2 个具有相同位置属性的绝对 div。第一层有一个透明的背景图像，带有一个倒置的白色箭头（与背景颜色相同）。第二层设置为封面照片，并与第一层重叠，使其具有箭头外观。

我无法将封面照片的正确位置放入第二个箭头层。我试着搜索了一段时间，结果是空的。我也检查了 facebook 的代码并且变得更加困惑。

4

1 回答 1

0

我想到了。它可能不是最好或最有效的解决方案，但它确实有效。

http://grab.by/kapw

在上图中，您将看到我绘制了 3 个蓝色框（div）。这些框被放置在一个绝对容器内，该容器具有与弹出对话框相同的宽度和 15 像素的固定高度。

这 3 个框的位置取决于哪个面框悬停在容器上方。在此示例中，左起第二个框被悬停 - 请注意箭头指向它。

将 ' left ' div 宽度设置为面框左侧位置。

将 ' bg ' div 左侧位置设置为面部框左侧位置。

将 ' right ' div 左侧位置设置为 left 和 bg div 宽度之和。

将 ' right ' div 宽度设置为父宽度减去 left 和 bg 宽度之和。

将 div容器的 zIndex 设置为较大的数字。

在bg div 内部 html内放置一个透明的反向箭头

 <div class="container">
  <div class="left"></div>
  <div class="bg">
   <img src="inversedArrow.png">
  </div>
  <div class="right"></div>
 </div>

中提琴！

于 2013-02-24T20:36:13.287 回答