Issues with Equidistant Boxes

[jeremyworboys]

I am having an issue with the equidistant box object Chris posted a while back.

The code works well (apart from on Presto) but I have run into another issue where applying position: absolute; on hover causes the hover not to be applied in Webkit. This code works fine in Gecko (untested in Trident).

It is quite difficult to explain so here is a reduced case. Any help would be appreciated.

[TheDoc]

I think this sort of makes sense, since you’re changing the physical position of the element that you’re hovering.

Even in Firefox it’s super buggy and doesn’t quite work properly. If you require them to be positioned absolutely, it looks like you’ll need to do that before the hover.

[jeremyworboys]

I understand that. I may have reduced the case too much, the idea is that one box fills the container (covering the others) on hover.

Setting them to position absolute before hover breaks the equidistant box object.

[joshuanhibbert]

G’day Jeremy, what is it exactly that you are trying to do? I think I understand, but I’m not 100% sure.

[jeremyworboys]

Hey Josh,

I’m trying to get three (number agnostic solution preferred however) boxes to sit equidistantly, horizontally in their parent container. Simple. The tricky part is that when hovering one of the boxes, I would like it to fill its container, covering the other elements.

I have almost got it figured out in this pen but I can’t figure out how to get the first box to fill on hover. If I set its width to 100% in .eq-item:first-child it works, but covers the other boxes preventing hover on them. This needs to work in Opera so pointer-events: none; is out. I tried using z-index, but using position: relative; on .eq-item caused more issues.

Any ideas?

[joshuanhibbert]

Hmm, I’m still a bit unsure. Is it just the first div you are still having trouble with? The second two also cover the other divs and don’t allow hovering of them, but the first only half fills the parent. Do you want the hovered element to fill, and cover the parent, or still allow hovering of the other elements? And if you still want hovering allowed, must they sit on top (or be visible)?

Sounds like you might need to use JavaScript to get it all to work, but once I fully understand what you have in mind, I’ll try and have a go using only CSS.

[jeremyworboys]

When a child is hovered, it should expand to fill the .example container and the other children should be covered and not-hoverable until is un-hovered and returns to its regular size.

The issue with the current state is that the first box doesn’t fill the .example container. It only fills the .eq-item div. I want it to act the same as the penultimate and last box.

This pen is an example of the second case explained above, where the first .eq-item box fills the .example box. This makes the penultimate and last .eq-item’s un-hoverable.

While writing this response I came across this solution which does exactly what I want. I guess the question now is: Is there any way to make this less horrible?

[joshuanhibbert]

I think that might be about as good as you get it with CSS. Unfortunately, with the current layout options, it is pretty much just a big hack.

[jeremyworboys]

Yeah, that was my thoughts as well. I’m rewriting it as a SASS mixin which will clean it up a fair bit.

EDIT: Here is the pen with the mixin and examples of use.

[Author]

Posts