0

私の質問は、投稿の上にカーソルを置いたときにのみ表示される、リブログといいねボタンを実現するための好ましいコードは何でしょうか? ここにあるように: http://giraffes-cant-dance.tumblr.com/

私はwww.onwardandbeyond.tumblr.comで個人の Web サイトに取り組んでおり、投稿は上下ではなく、ページ全体に横方向に進んでいます。

また、投稿にカーソルを合わせると、リブログ ボタン、いいね ボタン、パーマリンク、および最初に投稿を作成したソースに関する情報が表示される Web サイトも作成したいと考えていました。

これを達成するためのより簡単な方法はありますか?

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 
#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/

2 つが兄弟である場合 (およびコントロールをラッパー内に配置できない場合)、次を使用できます。

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

これは、このバージョンのフィドルです。http://jsfiddle.net/UxxKr/1/

于 2013-08-23T09:40:18.360 に答える