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

我有两个股利

<div class='parent'>
    <div class='child'></div>
</div>

当鼠标悬停在父级上时，如果我想从底部滑动子级div。
我怎样才能做到这一点？

最佳答案

你可以用这个

这是演示http://jsfiddle.net/ww2zY/2

.parent {
    float:left;
    width:100%;
    height:170px;
    ;
    background:red;
    position:relative;
    overflow:hidden;
}
.child {
    position:absolute;
    left:0;
    bottom:0;
    float:left;
    width:100%;
    height:100px;
    background:green;
    transform:translateY(100px);
    -webkit-transform:translateY(100px);
    -moz-transform:translateY(100px);
    transition:all 1s linear;
    -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
}
.parent:hover .child {
    transform:translateY(0px);
    -webkit-transform:translateY(0px);
    -moz-transform:translateY(0px);
}