0

我的问题是完成转发和喜欢按钮的首选代码是什么，仅在我将鼠标悬停在帖子上时显示？应该在这里： 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;
}
4

3 回答 3

0

你可以试试这样的

css

div {
    display: none;
}

a:hover + div {
    display: block;
}

html

<a>Hover</a>
<div>This to show on hover</div>
于 2013-08-23T09:33:21.067 回答
0 
#date:hover+#info,#info:hover{display:block}
于 2013-08-23T09:52:39.133 回答
0

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

于 2013-08-23T09:40:18.360 回答