Show hide div inside parent div

Question

There are couple of child divs in a parent div. I want to show/hide a particular child.

<div id="parent">
    <div id="child0">Text here</div>
    <div id="child1">Text here</div>
</div>

I want on mouse over div id="parent" to show hide div id=child0, everything else in parent div stays the same (visible).

Answer 1

You can do it all with CSS. Assuming this HTML:

<div id="parent">
    <div id="child0">Child0 Text here</div>
    <div id="child1">Child1 Text here</div>
</div>

You can add something like this CSS:

#child0 {
   display: none;
}

#parent:hover #child0 {
   display: block;
}

See it in action here: http://jsfiddle.net/QjeUq/

Answer 2

Try this:

CSS :

.outer_wrapper_class .inner_wrapper_class {
    display: none;
}
.outer_wrapper_class:hover .inner_wrapper_class {
    display: block;
}

HTML :

<div class='outer_wrapper_class'>
    <!-- HOVERABLE CONTENT HERE -->
    <div class='inner_wrapper_class'>
    <!-- HIDE/SHOW CONTENT HERE -->
    </div>
    <!-- HOVERABLE CONTENT CAN ALSO BE HERE -->
</div>