jQuery on Hover Show Div，z-index 问题

Question

我的问题可以在这里看到:http://jasonnarciso.com/dev/cmwd/concrete-solutions/

基本上，我有一个非常简单的 jquery 脚本，它在 .item 元素悬停时显示一个 div。工作正常，但在左侧和底部容器上，div 被截断了。

显然这是一个 z-index 问题，但我想知道我是否应该使用 jquery 设置 z-index？还是有另一种方法可以将其强制为最高索引？我试过在容器上使用不同的值，但似乎没有任何效果。

非常感谢任何帮助。

Answer 1

好的，我现在明白问题了。

我认为有两个问题，编码问题和设计问题。

让我们从设计开始。 #product-boxes 容器有一个宽度，您不应该显示超出该宽度的内容。确实，如果删除隐藏的溢出，你会解决正确的盒子剪辑问题，但它并不完美，因为悬停效果会导致水平滚动条。

关于底部框，它们将始终被剪裁，即使没有隐藏的溢出，只是因为容器没有足够的高度来显示悬停框。即使在这种情况下，如果没有隐藏的溢出，也会导致垂直滚动条。

关于编码，您应该以这种方式删除 clearfix，只需在 float 元素之后执行此操作:

<br class="clear" />

在你的 CSS 中:

.clear {display: block; clear: both; height: 0px;}

然后，要解决底切问题，您必须将#product-bozes css 修改为:

#product-boxes {
    /* REMOVED overflow: hidden; */
    padding: 35px 0px 200px 52px;
}

额外的填充将为容器提供足够的空间来显示叠加层。我在 Firebug 中对其进行了测试，它运行良好。