顯示DIV只有當鼠標懸停在

我的問題是什麼將是首選的代碼來完成一個reblog和喜歡按鈕，只顯示當我將鼠標懸停在一個帖子？爲應該在這裏：http://giraffes-cant-dance.tumblr.com/顯示DIV只有當鼠標懸停在

我工作的一個個人網站，在www.onwardandbeyond.tumblr.com和職位在頁面去，而不是上下horzontally。

我也想建立一個網站，當你將鼠標懸停在帖子下面顯示：一個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; 
}

來源

2013-08-23 Brittany Tobar

歡迎來到SO。您是否可以編輯您的帖子，使其包含實際問題（而不是暗示的問題）。就目前而言，你的意圖不明確。 – enhzflep

是的，我可以做到這一點。 –

如果你沒有看到它，這可能會幫助：http://tumblring.net/tumblr-reblog-button/（我不使用tumblr，對不起，如果這是無益的，浪費時間） – enhzflep

把要要懸停專區內顯示出來的東西。如果包裝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-23 09:40:18 robooneus

這不適用於我，我確信我必須在我的代碼中丟失一些東西。 –

我使用jsfiddles更新了每篇文章的工作原理。您需要根據您的代碼（基於您的HTML）來調整它。我仍然無法從你的文章中瞭解你想要展示的內容以及你想展示的內容（基於HTML）。如果你可以說我想'＃div'徘徊並顯示'＃span'，那麼我們可以給你確切的CSS – robooneus

WOAH！謝謝！它正在工作。我開始了，並開始與您的提示。現在我所要做的就是開始重新應用風格，並希望一切都會持續下去。再次感謝您的更新。你爲我超人這個項目。（請隨意補充英雄你實際上的生活） –

你可以嘗試這樣的事情

CSS

div { 
    display: none; 
} 

a:hover + div { 
    display: block; 
}

HTML

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

來源

2013-08-23 09:33:21 SaturnsEye

我試着那。我不知道爲什麼它沒有顯示。我目前的顯示：＃日期{ display：none; } ＃date：hover #datw { display：block; } –

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

來源

2013-08-23 09:52:39 Anon

顯示DIV只有當鼠標懸停在

回答

相關問題