2012-08-24

So, you want to create a expandable box, where if the user hovers the top part you show the whole thing, right?
Easy peasy, just set the hidden text display to none, outer_div:hover > div to block and you are all set, right?

NO

I see why you could think that it works. Just because it makes sense, doesn't mean it works.
Don't forget a whole lot of people uses Internet Explorer, and IE will never allow you to have it that easy...

As usual for IE, we must do some css hacks.
Specially 2 things:
1 - to fix the hover around the title text, not only the characters, set the background to something other than transparent.
2 - to be able to hover over the expanded part and not get it hidden, set the height to 100%, but not only to the hover, or it will hide even the title when it is not being hovered

it should look like this:

this css is considering:

your text here

show this message when hovered
there you go, and I just couldn't not make this comment: I HATE INTERNET EXPLORER!