仅当鼠标悬停在其上时显示div

Question

我的问题是，仅当我将鼠标悬停在帖子上时，完成reblog和like按钮的首选代码是什么？ 应该在这里： http : //giraffes-cant-dance.tumblr.com/

我正在个人网站www.onwardandbeyond.tumblr.com上工作 ，帖子在整个页面上呈水平分布，而不是上下浮动。

我还想创建一个网站，当您将鼠标悬停在帖子上时，会显示以下内容：重新博客按钮（如button，永久链接）以及有关最初创建该帖子的来源是谁的信息。

有没有一种更简单的方法可以实现这一目标，因为我似乎没有提出任何建议。

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

你可以尝试这样的事情

的CSS

div {
    display: none;
}

a:hover + div {
    display: block;
}

html

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

Answer 2

将要显示的内容放在要悬停的div中。 如果wrapper 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 3

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