Show div only when the mouse hovers over it

Question

My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/

I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.

I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.

Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.

HTML:

<div id="date">
    {block:Date}<a href="{Permalink}"> {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}</a>{/block:Date}
    {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
</div>

<div id="info">
    {block:RebloggedFrom}
    reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
        {ReblogParentName} 
    </a>
    origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
        {ReblogRootName}>
    <a/>
    {/block:RebloggedFrom}
</div>

CSS:

#info {
    color:#000;
    position: absolute;
    border-bottom: 2px #000 solid text-transform: uppercase;
    letter-spacing: 2px;
    font: 10px Consolas;
}
#info {
    margin-top: 0px;
    margin-bottom:0px;
    margin-right:;
    margin-left:;
}
#info {
    padding-top: 620px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:280px;
}
#info a {
    color: #000;
}
#date a, {
    width: 280px;
    color: #000;
    position:absolute;
    margin-top: 120px;
    margin-left: 100px;
    visibility: visible:
}
#date {
    display: none;
}
#date:hover #date {
    display : block;
}

Answer 1

Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:

.controls {
    display:none;
}

.wrapper:hover .controls {
    display:block;
}

Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/

If the two are siblings (and the controls can't be within the wrapper), then you can use the following:

.div:hover ~ .controls {
    display:block;
}

Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/