How to script CSS to achieve hide/appear effect based on hover

Question

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!

So many [unnecessary](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) and [malformed](http://validator.w3.org/check?uri=http%3A%2F%2Fbfcards.edicypages.com%2Flist-of-cards%2Fabyssal-warder-fire&charset=%28detect+automatically%29&doctype=Inline&group=0) tables. — Andrew Marshall, Apr 03 '11 at 04:29
@BoltClock I'm surprised you were even able to find it in there `;)`. — Andrew Marshall, Apr 03 '11 at 04:31
If you're using static HTML pages to build the entire site I don't think there's much we can do. Your existing HTML makes it almost impossible to use CSS to achieve your desired effect. — BoltClock, Apr 03 '11 at 04:35
Sorry guys if the HTML is ugly, I just don't know a better way to do it. Just starting to code XD Please feel free to let me know a better way to do it. — UrBestFriend, Apr 03 '11 at 05:20

score 2 · Accepted Answer · answered Apr 03 '11 at 04:41

2

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.

answered Apr 03 '11 at 04:41

jbrookover

5,100
1
23
23

Btw, is there a way to make all the information appear when hovered - not just individual divs? – UrBestFriend Apr 03 '11 at 05:23
Without adding more HTML/Javascript, there's not much you can do. The setup you have is very inflexible. There are, of course, easy ways to accomplish all that you want - just not with CSS. – jbrookover Apr 03 '11 at 15:14
@Jbrookover May I know what to add? I'll try to get some spare some time to add. It would also serve as a valuable lesson and experience to learn for me. Thanks in advance! – UrBestFriend Apr 03 '11 at 15:23
That question is a bit too broad to describe here. Investigate jQuery and using 'div' and positioning elements instead of tables. You will be able to do things like $(".UpgradeI").bind("mouseover", function() { $(".details").show() }); – jbrookover Apr 03 '11 at 19:47

score 1 · Answer 2 · answered Apr 03 '11 at 04:39

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

score 0 · Answer 3 · answered Apr 03 '11 at 04:44

0

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.

answered Apr 03 '11 at 04:44

buschtoens

8,091
9
42
60

Yes I know, is there another way to do it? Should I substitute divs for tables? Wouldn't it end up the same? – UrBestFriend Apr 03 '11 at 05:31

Lie Ryan · Answer 4 · 2011-04-03T05:15:18.173

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;
}

How to script CSS to achieve hide/appear effect based on hover

4 Answers4

Linked