Show content when hovering over DIV

css, html, mousehover, stylesheet

Solution

Assume you have the following markup:

<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;
}

This should do the trick.

Not sure how you'd do it with transitions, but you'd have to put the same selector at least.

Example

Problem

Is it possible to show content when hovering over the DIV. See Image When I hover over the div, the transition takes place, but is it possible to show content inside the hovering div, ie. Images etc 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; } ```

Original source