CSS display hidden text on rollover

[sailors1112]

Hello all,

I’ve been hitting my head against the wall for a couple of days with this.

http://eigobento.com/vocabulary.html

I’ve been trying to get the steps to be hidden (and the table collapsed) until the mouse rolls over “More Info.” I want the table to shrink and grow when the extra text is hidden/unhidden.

Any help would be much appreciated. Honestly, I’m a total newb, so please explain clearly.

Thank you very much!

[Paulie_D]

I know it probably won’t help but I wouldn’t be using a table here. Divs or a list would make more sense as you can target them directly in your CSS.

[carlbennettnz]

I’m not quite sure what you mean by table being collapsed but to make the steps appear when you hover over “More info” you need to add an ID to the “Read more” paragraph and the steps paragraph and then add this to your CSS:

/* This hides the steps by default */

#steps {

display: none;

}



/* Means that when the element with an ID of 'read-more' is hovered then all of its siblings with an ID of 'steps' should be shown */

#read-more:hover ~ #steps {

display: block;

}

You can remove ‘class=”hidden”‘ from the two paragraphs

Hope this helps

[sailors1112]

@Paulie_D… you’re right I’m sure, I’m just really bad at this.

@Carlbennettnz … thank you for the advice. I edited it like you said but I’m getting nothing on hover. I thought maybe there was something else weird that was messing it up, but even when I made a test page it isn’t working:

http://eigobento.com/hovertest2.html

http://eigobento.com/vocabulary.html

Can you tell what I did wrong? I haven’t been able to figure it out -_-;

Thanks again!

[sailors1112]

Thank you very much! I’m beginning to see how divs work. I think I can work with this…

^_^

[jamygolden]

@sailors1112 your examples work 100%… In Everything other than Chrome and Safari. So it works in IE7+, Firefox and Opera.

#moreinfo:hover + #steps{display: block;}

That will work in Chrome and Safari too. So you were right, it’s just a webkit bug.

[sailors1112]

@Jamy_za… that’s for pointing that out! It works now!!! ;_; Thank you I’m on a mac using chrome so I never noticed…

Although, I just realized I don’t like the roller over 100%

Is there a command that will get it to do the same thing (open/close) with a click instead?

[sailors1112]

@Paulie_D… those are goods points. I’m just worried about the fact that the text disappears really easily and if you have to scroll to read it you have to go back and forth… It’s a bit difficult and annoying : /

But, I’m also worried about JS. That’s probably waaaaaay over my head hahaha

[jamygolden]

There is, but it won’t be supported by IE8 and lower.

More Info

Whatever

#steps:target{display: block}

[sailors1112]

Thanks everyone! This has all been really helpful and informative!

I feel like I learned a lot (^-^)V

[sailors1112]

Finished product!

http://www.eigobento.com

Thanks again everyone for your help!

[Author]

Posts