grow p onmouseover

[Dday76]

I've got a list of items with with associated details. Rather than do a regular #name link to send the user somewhere else to view the details, I thought it would be good to just have the details with the name, and grow the <p> when the user hovers.

it seems intuitive that the following arrangement would work:

CSS
a.grow {height=20px;overflow=hidden;}
a.grow:hover {overflow=visible;}

HTML
<a class="grow">Item 1<br />
details details<br />
more details</a>

This arrangement should show just "Item 1" (due to the restricted height) until the user hovers, and then the overflow property should change to 'visible', thus revealing the details...

I imagine I'm doing something silly like putting breaks in <a>, but I was hoping someone could point me in the right direction.

Thanks for the help.

[Twey]

I imagine I'm doing something silly like putting breaks in <a>No, you're doing something silly like using = instead of : in CSS :)
Also, a static 20px isn't a good idea, since not everybody's fonts will be exactly 20px in height. 1.5em is usually a good estimate.

[Dday76]

ok, I was going to toss myself off of a building out of shame, but in my defense, I was not actually using = in the code.

Oh, I spoke too soon. I did have a.grow (not) matched with a.grows:hover in the other link. An extra s was the problem.

Well, thanks for fixing that. I'm going to toss myself off of a building now. I hope someone else can benefit from your great advice.

[Twey]

Heh, whoops :p