仅当鼠标悬停在其上时显示div

布列塔尼·托巴尔(Brittany Tobar)

我的问题是,仅当我将鼠标悬停在帖子上时,完成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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS3,当鼠标悬停在父div上时显示或隐藏子div

来自分类Dev

鼠标悬停在其上时,按住div面板

来自分类Dev

当鼠标悬停在悬停元素上时,如何设置悬停效果继续显示?

来自分类Dev

当鼠标悬停在悬停元素上时,如何设置悬停效果继续显示?

来自分类Dev

当鼠标悬停在其下方的文本上时,如何使标记改变颜色?

来自分类Dev

angular 5 - 当鼠标悬停在产品上时,在 div 中显示产品详细信息

来自分类Dev

当鼠标悬停在按钮上时,下拉菜单不显示

来自分类Dev

当鼠标悬停在不同颜色上时,传单突出显示标记

来自分类Dev

当鼠标悬停在Jssor中的缩略图菜单上时显示字幕

来自分类Dev

当鼠标悬停在数据点上时如何显示工具提示

来自分类Dev

当鼠标悬停在网格上时显示/隐藏网格行

来自分类Dev

当鼠标悬停在双引号上时,停止Eclipse以显示文档

来自分类Dev

当鼠标悬停在不同颜色上时,传单突出显示标记

来自分类Dev

当鼠标悬停在div上时,使其保持可见状态

来自分类Dev

为什么当鼠标悬停在ScrollViewer上时,为什么我的WPF样式触发器无法仅显示水平滚动条?

来自分类Dev

如何单击WPFObject(“ Image”)(仅将鼠标悬停在其上时可见)?

来自分类Dev

仅使用CSS将鼠标悬停在另一个div上时显示div

来自分类Dev

仅使用CSS将鼠标悬停在另一个div上时显示div

来自分类Dev

将鼠标悬停在其他Div上时替换Div

来自分类Dev

将鼠标悬停在其他Div上时替换Div

来自分类Dev

将鼠标悬停在其方法和类上时如何显示它的javadoc?

来自分类Dev

将鼠标悬停在其容器div上时交换图像

来自分类Dev

当鼠标悬停在元素上时,我想显示一小段文本,例如“获取信息”

来自分类Dev

悬停在锚点上时显示的CSS div;将鼠标悬停在div上时保持可见

来自分类Dev

当鼠标不再悬停在其上时,悬停动画会立即停止吗?

来自分类Dev

仅将鼠标悬停在图像上时才显示span元素

来自分类Dev

仅当将鼠标悬停在文本上时,如何显示收费提示?

来自分类Dev

当鼠标悬停在Emacs / gdb中时显示变量的值?

来自分类Dev

当鼠标悬停在输入文本框上时显示一些文本

Related 相关文章

  1. 1

    CSS3,当鼠标悬停在父div上时显示或隐藏子div

  2. 2

    鼠标悬停在其上时,按住div面板

  3. 3

    当鼠标悬停在悬停元素上时,如何设置悬停效果继续显示?

  4. 4

    当鼠标悬停在悬停元素上时,如何设置悬停效果继续显示?

  5. 5

    当鼠标悬停在其下方的文本上时,如何使标记改变颜色?

  6. 6

    angular 5 - 当鼠标悬停在产品上时,在 div 中显示产品详细信息

  7. 7

    当鼠标悬停在按钮上时,下拉菜单不显示

  8. 8

    当鼠标悬停在不同颜色上时,传单突出显示标记

  9. 9

    当鼠标悬停在Jssor中的缩略图菜单上时显示字幕

  10. 10

    当鼠标悬停在数据点上时如何显示工具提示

  11. 11

    当鼠标悬停在网格上时显示/隐藏网格行

  12. 12

    当鼠标悬停在双引号上时,停止Eclipse以显示文档

  13. 13

    当鼠标悬停在不同颜色上时,传单突出显示标记

  14. 14

    当鼠标悬停在div上时,使其保持可见状态

  15. 15

    为什么当鼠标悬停在ScrollViewer上时,为什么我的WPF样式触发器无法仅显示水平滚动条?

  16. 16

    如何单击WPFObject(“ Image”)(仅将鼠标悬停在其上时可见)?

  17. 17

    仅使用CSS将鼠标悬停在另一个div上时显示div

  18. 18

    仅使用CSS将鼠标悬停在另一个div上时显示div

  19. 19

    将鼠标悬停在其他Div上时替换Div

  20. 20

    将鼠标悬停在其他Div上时替换Div

  21. 21

    将鼠标悬停在其方法和类上时如何显示它的javadoc?

  22. 22

    将鼠标悬停在其容器div上时交换图像

  23. 23

    当鼠标悬停在元素上时,我想显示一小段文本,例如“获取信息”

  24. 24

    悬停在锚点上时显示的CSS div;将鼠标悬停在div上时保持可见

  25. 25

    当鼠标不再悬停在其上时,悬停动画会立即停止吗?

  26. 26

    仅将鼠标悬停在图像上时才显示span元素

  27. 27

    仅当将鼠标悬停在文本上时,如何显示收费提示?

  28. 28

    当鼠标悬停在Emacs / gdb中时显示变量的值?

  29. 29

    当鼠标悬停在输入文本框上时显示一些文本

热门标签

归档