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

Question

悬停在 DIV 上时是否可以显示内容。参见 Image

当我将鼠标悬停在 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;
}

Answer 1

假设您有以下标记:

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

CSS:

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

这应该可以解决问题。

不确定如何处理过渡，但至少必须放置相同的选择器。

Example