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?
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:
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:
there you go, and I just couldn't not make this comment: I HATE INTERNET EXPLORER!your text here
show this message when hovered