Показать div только при наведении курсора мыши на него

Question

Мой вопрос в том, что было бы предпочтительным кодом для выполнения функции reblog и как кнопка, только показывая, когда я навешиваю над сообщением?, как следует здесь: http://giraffes-cant-dance.tumblr.com/

Я работаю на личном сайте, в www.onwardandbeyond.tumblr.com и посты собираются horzontally через страницу, а не вверх и вниз.

Я также хотел создать веб-сайт, где, когда вы наведете над сообщением следующее шоу: кнопка reblog, как кнопка, постоянная ссылка и информация о том, кто изначально создавал сообщение.

Есть ли более простой способ достичь этого, что на самом деле работает, потому что ничего, что я, кажется, не придумал.

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

Поместите вещи, которые хотите отобразить в пределах div, который вы хотите навести. Если оболочка DIV является .wrapper и элементы при наведении курсора находятся в DIV .controls:

.controls { 
    display:none; 
} 

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

Вот скрипка, показывающая, как это будет работать: http://jsfiddle.net/6Fq5E/

Если две родные братья (и управление не может быть в пределах обертки), то вы можете использовать следующее:

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

Вот скрипка для этой версии. http://jsfiddle.net/UxxKr/1/

Answer 2

Вы могли бы попробовать что-то вроде этого

CSS

div { 
    display: none; 
} 

a:hover + div { 
    display: block; 
} 

HTML

<a>Hover</a> 
<div>This to show on hover</div> 

Answer 3

#date:hover+#info,#info:hover{display:block}