1

我正在网站上制作图像拼贴画，并且希望每张图像在用户将鼠标悬停在图像上时都能平滑过渡。此叠加层应略微透明并包含文本和按钮。这是我到目前为止的进展： http: //classicopia.ivointeractive.com/

每个图像都包含在一个“产品”div 中，每个产品 div 应该包含一个 img 和一个悬停时出现的“productOverlay”div。现在，书柜是唯一附有覆盖物的物品 - 但你看不到它，这就是问题之一

我现在陷入两个问题：

  1. 如何使叠加层可见？现在没有规则使它不可见，我唯一能看到它的就是将它的定位设置为绝对，但这会破坏它的尺寸。

  2. 我怎样才能让叠加层实际上覆盖在图像上？（现在它被放置在它下面）

我已经加载了 jQuery，所以任何使用它的解决方案都可以。谢谢

4

3 回答 3

1

父 div 需要是相对的，子 div 需要是绝对的或固定的。然后，您需要为子 div 添加top: 0;和left: 0;以及z-index: 1;CSS。然后使用 jQuery 在悬停时显示和隐藏。

于 2012-09-22T21:21:55.373 回答
0

尝试使用z-indexcss 属性。

于 2012-09-22T19:07:16.607 回答
0

将每个图像包装在一个 div 中position: relative，并将叠加层也放在这个 div 中。

首先是叠加层display: none。display: block将鼠标悬停在您为叠加层设置的 div上。或者 jQueryshow()和hide()

图像z-index为 0，叠加层为 1。

于 2012-09-22T19:36:54.633 回答