advanced rollover to display extra options

Question

Hi,

I have a web app that has a list of user comments. I want extra options for these comments (vote, reply, etc..) to appear only when the comment itself is mouseover-ed

The best example of what I am looking for would be a youtube video:

http://www.youtube.com/watch?v=s2VzLn6DMCE&ob=av3e

When you go to the comments the options (reply, vote up/down) are only displayed when that specific comment is rolled-over. How is this achieved? Is it simply a matter of using jquery (or similar javascript library) and displaying hidden divs?

Edit:

Ok so the element I am rolling over is complicated that I need to do it with javascript. I'm using rails, so prototype it is! Each of the individual list items has a unique id, but I have no idea how to pass this id variable into the prototype! This way it can display/hide the elements from a specific list item. How do I go about doing this?

Answer 1

CSS is the best way, in my opinion. Here's a vertical way:

HTML:

<div class='roller'>
  <div>Options</div>
  <div>Comments</div>
</div>

CSS:

.roller { overflow:hidden; height:30px;line-height:30px }
.roller:hover { height:60px }

And here's a horizontal way, with the same HTML:

CSS:

.roller { overflow:hidden;width:100px }
.roller div { width:100px;float:left }
.roller:hover { width:200px }

A little creative margin/padding work and you can get different results.

Also, you can use first-child and/or next sibling selectors, or others.

Answer 2

Pure CSS might be an option, but I think I'd handle the show/hide with Jquery so that I could have total access over each element. This way, I could potentially conditionally show/hide elements based on login, session, etc.

Jquery How-To

You'd still want to build the divs out to contain your icons, and position with CSS. The background change could also be handled with Jquery, via the .css method