CODEWITHSUNDEEP
htmlcss
UrBestFriend
UrBestFriend

Reputation: 607

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:

Hide Show

It would hide the information until UpgradeI, UpgradeII or UpgradeIII is hovered. Site link is Here

There is around 500 pages like that, so tweaking or adding javascript in the html is not feasible. I think CSS is the way to go to do this, but I've tried: 

div.UpgradeI {display:none;} 
div.UpgradeI:hover {display:inline;}

but it just hides everything and doesn't show the information when hovered. Anyway, if its not possible to achieve the same result using css only, please show me what code to add. Thanks!

Upvotes: 1

Views: 550

Answers (4)

Lie Ryan
Lie Ryan

Reputation: 64837

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.UpgradeI table:first-child ~ *:nth-child(n+3), div.UpgradeII table:first-child ~ *:nth-child(n+3), div.UpgradeIII table:first-child ~ *:nth-child(n+3) {
    display: none;
}
div.UpgradeI table:first-child:hover ~ *, div.UpgradeII table:first-child:hover ~ *, div.UpgradeIII table:first-child:hover ~ * {
    display:  block;
}

Upvotes: 0

buschtoens
buschtoens

Reputation: 8541

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

By the way: Your markup is painfully.

Upvotes: 0

jbrookover
jbrookover

Reputation: 5150

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.

Upvotes: 2

Wei Ma
Wei Ma

Reputation: 3155

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

Upvotes: 1

Related Questions