将鼠标悬停在 DIV 上时显示内容

是否可以将鼠标悬停在 DIV 上时显示内容。看Image https://i.stack.imgur.com/r4b0G.jpg

当我将鼠标悬停在 div 上时，会发生转换，但是是否可以在悬停的 div 内显示内容，即。图片等

html :

<div class="flowingdown">

</div>

CSS3 :

.flowingdown {
    width:1045px;
    background-image:url(images/vertical_cloth.png);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0  55px 55px ;
    transition: height 1s;
    -webkit-transition: height 1s;


}

.flowingdown:hover {
    height:100px;
}

假设您有以下标记：

<div id="parent">
    Some content
    <div id="hover-content">
        Only show this when hovering parent
    </div>
</div>

The CSS:

#hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}

这应该可以解决问题。

不确定如何使用过渡来做到这一点，但您至少必须放置相同的选择器。

Example http://jsfiddle.net/5Bpur/