当前位置：文江博客话题详情

jQuery onHover 显示 Div、z-index 问题

发布于 2024-10-02 12:14:43 字数 353 浏览 2 评论 0原文

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

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

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

非常感谢任何帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不即不离 2024-10-09 12:14:43

好的，我现在看到问题了。

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

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

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

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

<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 中测试了它，运行良好。

Ok, I see the problem now.

I think that there are two problems, a coding issue and a design issue.

Let's start from the design. the #product-boxes container has a width, and you shouldn't show something that it's outside that width. It's true that if you delete the hidden overflow you'll solve the right boxes clip issue, but it's not perfect because the hover effect will cause an horizontal scrolling bar.

About the bottom boxes, they'll be always clipped, even without the hidden overflow, simply because the container hasn't enough height to show the hovering box. Even in this case, without the hidden overflow, you'll cause a vertical scrolling bar.

About the coding, you should drop the clearfix in that way, just do this, after your floated elements:

<br class="clear" />

and in your CSS:

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

Then, to solve the bottom cut, you have to modify the #product-bozes css to:

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

The extra padding will give to the container enough space to show the overlays. I tested it in Firebug, and it's working fine.

回复收藏 0 原文

萌︼了一个春 2024-10-09 12:14:43

你的CSS中有这个：

#product-boxes {
    overflow: hidden;
}

所以当一个子元素（比如你的菜单）需要在产品框之外渲染它时，它就会被剪掉。您遇到的是溢出问题，而不是z-index问题。我认为该页面上不需要 overflow:hidden; ，您应该仅在需要剪辑所包含的内容时使用它。

You have this in your CSS:

#product-boxes {
    overflow: hidden;
}

So when a child, such as your menu, needs to render itself outside product-boxes it gets clipped. You have an overflow problem, not a z-index problem. I don't see any need for overflow: hidden; on that page, you should only use that when you need to clip the contained content.

回复收藏 0 原文