current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to use only css to turn a nested div and a normal div into something where the top one can be hovered to view more content without moving all the layout around.

Essentially:

[hover me for more]

[content-that-gets-overlapped-by-hover-content]

or see the nearly-working example on jsfiddle:

http://jsfiddle.net/tchalvakspam/vVgY2/9/

Unfortunately, when you do overflow:visible, it seems to be nearly useless because you can't give the content that overflows any background style, so it remains unreadable.

Is that right, there is no way to give overflow:visible overflowing content a background? If that is the sad state of affairs, what is the shortest amount of changes that could be done to that content to turn it into a readable hover-to-expand section?

share|improve this question
1  
You could do something like this: jsfiddle.net/Shmiddty/vVgY2/12 but it might not be easily transitioned to an actual layout. –  Shmiddty Oct 17 '12 at 19:20
    
Hmmm, I'm surprised, but that almost works, I was sure that you were supposed to stick "position:relative" on a container of absolute elements to make them work right. Sadly since absolute positioning takes an element out of flow, when the hover happens it still throws all the rest of the layout out of place. jsfiddle.net/tchalvakspam/MBcDW –  Kzqai Oct 17 '12 at 19:36
    
Wasn't able to set a placeholder, so unless I'm missing something, absolute positioning ends up just creating a different problem with shifting layout. jsfiddle.net/tchalvakspam/MBcDW –  Kzqai Oct 17 '12 at 19:52
    
Can fix this with javascript, of course, by adding a margin to the element after the expandible element jsfiddle.net/tchalvakspam/MBcDW/22, but no clear path to accomplishing this with css alone. –  Kzqai Oct 17 '12 at 19:59

1 Answer 1

up vote 0 down vote

Finally found the solution in the form of a sibling selector on the hover to give the next element after the hovered element a margin to take the place of the now-absolute hover element.

http://jsfiddle.net/tchalvakspam/MBcDW/

So the pertinent css becomes:

#fixed-height{
    position:relative;        
    width:100%;
    height:1.25em;
    overflow:hidden;
    background-color:lightblue;
    color:red;
    z-index:10;
}
#fixed-height:hover{
    overflow:visible;
    height:auto;
    position:absolute;
    max-width:20em;
}
#fixed-height:hover + #right-below{
    margin-top:1.25em;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.