0

有点难以用语言表达,所以这里的 jsFiddle展示了它。

当悬停在其中一个绿色块上时,我希望它的背景足够扩大,以使其“接触”连续的矩形(它与它们的边距重叠)。但是,当悬停在每一行的最后一个块上时,布局会变得疯狂:下面的行只显示一个元素,等等。

原因似乎源于负边距;因为,如果“扩展”类的边距设置为纯 0 而不是 -5,则不会发生此问题。但这当然会在块之间留下空间。

父容器的大小似乎并没有改变这一点。请注意,目前我并不特别担心扩展块没有很好地居中并使其行中的其他块有点摇摆的事实,尽管它可能与问题有关。

4

3 回答 3

3

将扩展的 de padding 更改为 10px http://jsfiddle.net/TMXLz/4/

于 2012-07-19T13:27:43.690 回答
0

我能看到做你想做的唯一方法是将这些块中的每一个绝对(位置:绝对)定位到你想要的位置。您在这里的主要问题是您想要对盒子进行的更改将导致它们侵占彼此的空间。因此,您要么需要在每次鼠标悬停时调整它们的所有间距(使用 js)(这很糟糕)。或者将项目绝对定位到位(每个框的特定定位样式),那么它们部分重叠就不会有问题。只需确保增加活动的 z-index 以使其始终“超过”其他人。

于 2012-07-19T13:33:34.973 回答
0

这可能是您正在寻找的输出

http://jsfiddle.net/TMXLz/5/

于 2012-07-19T14:33:51.170 回答