How To Script Css To Achieve Hide/appear Effect Based On Hover

Ignoring internet explorer 6 and latter, how do I script the css to achieve the following results: It would hide the information until UpgradeI, UpgradeII or UpgradeIII is hovere

Solution 1:

Okay, it's possible to do this with CSS. First of all, those styles you suggest don't work because if it starts out with display:none, there is nothing to hover on for the next style to kick in.

I was able to add this to your site with Firebug:

div.UpgradeI,
div.UpgradeII,
div.UpgradeIII {
   height:20px;
   overflow:hidden;
}

div.UpgradeI:hover,
div.UpgradeII:hover,
div.UpgradeIII:hover {
   height:auto;
}

That is the ugliest hack in history, but it achieves the desired effect without changing the HTML or adding Javascript. The paragraph below doesn't slide up because everything is positioned absolutely. If you start using float styles for everything else, though, it'll work.

Obviously, you can edit the height to show more/less of the div as necessary.

Solution 2:

It would be hard to do it with only css. Because once you set the element style to display:none, it's not possible to catch the :hover event by the element.

I would suggest to use jquery to create a place holder element at the empty place. When the mouse hover over this element, then display the alternative "real" element.

you can try this plug in to see if you like it. http://cherne.net/brian/resources/jquery.hoverIntent.html

Solution 3:

UpgradeI table, UpgradeII table, UpgradeIII table {
    display: none;
}
UpgradeI table:first-child, UpgradeII table:first-child, UpgradeIII table:first-child {
    display: inline;
}
UpgradeI:hovertable, UpgradeII:hovertable, UpgradeIII:hovertable {
    display: inline;
}

By the way: Your markup is painfully.

Solution 4:

This works on Firefox 4.0 (and probably Firefox 3.0, Chrome, Safari, etc; though I did not test on them). This definitely won't work on IE6, because IE6 does not support :hover on arbitrary element, :nth-child() selector, and the sibling selector (~):

div.UpgradeItable:first-child ~ *:nth-child(n+3), div.UpgradeIItable:first-child ~ *:nth-child(n+3), div.UpgradeIIItable:first-child ~ *:nth-child(n+3) {
    display: none;
}
div.UpgradeItable:first-child:hover ~ *, div.UpgradeIItable:first-child:hover ~ *, div.UpgradeIIItable:first-child:hover ~ * {
    display:  block;
}