在另一个div的顶部展开div(悬停)

Question

如何在另一个div上扩展div(悬停)？如何在附图中显示出类似的内容？

<article>
    <header>
        content title
    </header>
    <div>
        main article content
    </div>
    <div class="share_buttons">
        <div class="">SHARE</div>
        <div class="share_in">
            <a>FACEBOOK</a>
            <a>GOOGLE+</a>
            <a>LINKEDIN</a>
            <a>PICASA</a>
        </div>
    </div>
</article>

Answer 1

在这里,我从头开始创建了一个整体,但它有一个不同的(更好的)HTML布局,它也使用纯CSS,不需要JavaScript.

EDIT 1 更新了JSFiddle更好的示例和更好的CSS布局.

HTML

<div class='box'>
    <div class='box-cnt'>Lorem ipsum dolor sit amet, dicunt perpetua te mei. Vis id tritani utroque copiosae...</div>

    <div class='box-share'>
        <div class='share-title'>Share</div>
        <div class='share-items'>
            <div class='item'>Facebook</div>
            <div class='item'>Google</div>
            <div class='item'>MySpace</div>
        </div>
    </div> 
</div>

CSS

.box {
    width: 400px;
    height: auto;
    min-height: 300px;
    padding-bottom: 55px;
    border: 1px solid lightgray;
    position: relative;
}

.box-share {
    position: absolute;
    z-index: 2;
    bottom: 0;
    background: lightgray;
    width: 100%;
    height: 50px;
    overflow:hidden;
    transition: height 450ms;
    -moz-transition: height 450ms;
    -webkit-transition: height 450ms;
}

    .box-share:hover {
        height: 100px;
    }

.share-title {
    height: 50px;
    width: 100%;
    text-align: center;
    line-height: 3.2;
}

.share-items {
    width: 100%;
    height: 50px;
}

.box-cnt {
    width: 100%;
    height: auto;
}

.item {display: inline-block;height: 100%;margin: 5px;}

这是一个JSfiddle的例子