0

我网站上的帖子设置为在鼠标悬停在帖子上时显示有关帖子的信息。

目前，当我将鼠标悬停在帖子上时，信息会显示在右侧，我希望它显示在帖子的顶部。我希望能够将信息边缘显示在中心的帖子顶部，但我输入的任何内容都不起作用。在我尝试的一切都不起作用之后，我回去并将它们设置为空白，但仍然不起作用。您可以在http://fallbackryleighamor.tumblr.com/上查看实时版本

这是当前的 css。知道如何编辑它以使其工作吗？

#info #date{ color:#000; border: 2px #000 solid;
text-transform: uppercase; letter-spacing: 2px; font: 10px Consolas;}

#info a{ color: #000;}

#date a { width: 280px; color: #000;}

#posts{ position:;}

#date #info{position:;} #date #info{float:;} 

 {background: rgba(0, 0, 9, 0.1); float:left; width: auto; height: auto;
margin-top: ;}

#textpost #photopost #photosetpost #quotepost #quotelink #audiopost 

#videopost{background: rgba(0, 0, 9, 0.1); float:left; width: auto;
height: auto; margin-top: ;}

#date { display:none;}

 #posts:hover #date {display:block;}

 #textpost:hover #photopost:hover #photosetpost:hover #quotepost:hover #quotelink:hover 
 #audiopost:hover    #videopost:hover{display:block;}


   #date #info{
        margin-top:0px;
        margin-bottom:0px;
        margin-right:0px;
        margin-left:0px;
    }

       #date #info{
        padding-top:0px;
        padding-bottom:0px;
        padding-right:0px;
        padding-left:0px;
    } 

    #date #info{
        z-index:;}

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 id="info">{block:RebloggedFrom} 
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
   {ReblogParentName} 
</a>
        origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}<a/>{/block:RebloggedFrom}

    </div></div>

已更新解决方案。

CSS

 #date{
 position:relative;
   left:-430px;
    top:95px;
    z-index:1;
       }

      #info{
    position:relative;
    left:-420px;
 top:190px;
 z-index:1;
    }

  #controls { display:none;}

  #posts:hover #controls {display:block;}

HTML

       <div id="controls"><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>
                <br>
    <div id="info">{block:RebloggedFrom} 
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
   {ReblogParentName} 
</a>
        origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}<a/>{/block:RebloggedFrom}

                </div></div>

太棒了！我要感谢所有评论并帮助我度过这次挫折的人。我希望我的解决方案可以帮助其他人。

4

2 回答 2

1

您可以尝试使用 with stylez-index:1;和position: absolute;

像这样的东西： -

#date #info{
        position: absolute;
        margin-top:0px;
        margin-bottom:0px;
        margin-right:0px;
        margin-left:0px;
        z-index: 0;
    }

       #date #info{
        position: relative;
        padding-top:0px;
        padding-bottom:0px;
        padding-right:0px;
        padding-left:0px;
        z-index: 1;
    } 

    #date #info{
        z-index:;}
于 2013-08-31T06:42:44.140 回答
1

将帖子 z-index 设置为

#posts{
 z-index:1;
}

和类似的信息

 #date #info{
    position: absolute;

    z-index: 2;
}

或将 z-index 设置为大于 1 的任何值。希望对您有所帮助......

于 2013-08-31T07:01:15.187 回答