jqueryonhover显示Div、z索引问题
我的问题可以在这里看到: 基本上,我有一个非常简单的jquery脚本,它在.item元素悬停时显示一个div。工作正常,但在左侧和底部容器上,div被切断 显然这是一个z-index问题,但我想知道是否应该使用jquery设置z-index?还是有其他方法可以迫使它达到最高指数?我尝试在容器上使用不同的值,但似乎没有任何效果jqueryonhover显示Div、z索引问题,jquery,css,z-index,Jquery,Css,Z Index,我的问题可以在这里看到: 基本上,我有一个非常简单的jquery脚本,它在.item元素悬停时显示一个div。工作正常,但在左侧和底部容器上,div被切断 显然这是一个z-index问题,但我想知道是否应该使用jquery设置z-index?还是有其他方法可以迫使它达到最高指数?我尝试在容器上使用不同的值,但似乎没有任何效果 非常感谢您的帮助。好的,我现在看到问题了。 我认为有两个问题,编码问题和设计问题。 让我们从设计开始。#product Box容器有一个宽度,您不应该显示超出该宽度的内容。
非常感谢您的帮助。好的,我现在看到问题了。
我认为有两个问题,编码问题和设计问题。
让我们从设计开始。#product Box容器有一个宽度,您不应该显示超出该宽度的内容。确实,如果删除隐藏溢出,将解决右框剪辑问题,但这并不完美,因为悬停效果将导致水平滚动条。
对于底部的框,它们将始终被剪裁,即使没有隐藏的溢出,这仅仅是因为容器没有足够的高度来显示悬停框。即使在这种情况下,如果没有隐藏的溢出,也会导致垂直滚动条。
关于编码,您应该以这种方式删除clearfix,在浮动元素之后执行此操作:
<br class="clear" />
然后,要解决底部切割问题,您必须将#product bozes css修改为:
#product-boxes {
/* REMOVED overflow: hidden; */
padding: 35px 0px 200px 52px;
}
额外的填充将给容器足够的空间来显示覆盖层。我在Firebug中测试了它,它运行良好。您的CSS中有以下内容:
.clear {display: block; clear: both; height: 0px;}
#product-boxes {
overflow: hidden;
}
因此,当一个子菜单(如菜单)需要在产品框外渲染时,它会被剪裁。您有
溢出
问题,而不是z-index
问题。我不认为有任何必要overflow:hidden
在该页面上,您应该只在需要剪辑包含的内容时使用它。关于ifoverflow:hidden
的答案,我建议您更改箭头的位置,并将其放在略高的位置。Firefox、Safari、Chrome-他们都可以这样做。我应该提到的是,你必须在以“挡土墙”为标题的小容器内以“>”为圆点悬停。好的,现在我看到了,我用新的说明再次回答,让我知道这是否解决了问题。它实际上被用作clearfix,因此删除它会导致网站看起来有点奇怪。您可能需要建议一种替代ClearFix的方法,它与插入一个唯一目的是清除的
一样困难:两者都是代码>(或仅一侧)。如果CSS允许你将样式和HTML完全分离,生活会变得更容易,但它根本就不能这样工作;我们常常只能选择使用哪一个乱七八糟的东西来解决我们使用的系统中的缺陷。如果jnarciso希望在不剪切的情况下清除浮动,那么溢出
是错误的kludge。