Question

我的问题是什么是完成reblog和喜欢按钮的首选代码，只显示我将鼠标悬停在某个帖子上？，如下所示：http://giraffes-cant-dance.tumblr.com/

我正在www.onwardandbeyond.tumblr.com的个人网站上工作，这些帖子正在整个页面上，而不是上下。

我还想创建一个网站，当你将鼠标悬停在帖子上时，显示以下节目：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

你可以试试这样的事情

CSS

div {
    display: none;
}

a:hover + div {
    display: block;
}

HTML

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

Answer 2

将要显示的内容放在要悬停的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 3

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

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

3 个答案: