我的问题是,仅当我将鼠标悬停在帖子上时,完成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;
}
将要显示的内容放在要悬停的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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句