显示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只有当鼠标悬停在

回答

相关问题