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

Question

将鼠标悬停在DIV上时是否可以显示内容.见图片

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

这应该可以解决问题.

不知道你如何使用过渡,但你必须至少放置相同的选择器.

例