- This topic is empty.
July 22, 2012 at 8:20 am #39014
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.July 22, 2012 at 3:19 pm #106590TheDocMember
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.July 22, 2012 at 7:49 pm #106604
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.July 22, 2012 at 9:19 pm #106607
G’day Jeremy, what is it exactly that you are trying to do? I think I understand, but I’m not 100% sure.July 23, 2012 at 1:14 am #106500
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-childit 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
.eq-itemcaused more issues.
Any ideas?July 23, 2012 at 1:22 am #106611
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)?
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?July 23, 2012 at 2:01 am #106613
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.July 23, 2012 at 2:03 am #106614
- The forum ‘CSS’ is closed to new topics and replies.