Show child div on mouse hover of parent - needs javascript?
I need to show a div when you house over its parent (default is for the child div to be hidden). Is the only way to do this with javascript? Thanks
Solution 1:
No JS required.
.hidden {
display: none;
}
.parent:hover .hidden {
display: block;
}<div class="parent">
<p>Hello, I'm a child...</p>
<p class="hidden">..and so am I but I'm hidden.</p>
</div>Solution 2:
@jdln; yes
css:
.outer {
background:red;
height:100px;
}
.box1 {
background:blue;
height:100px;
width:80px;
display:none;
}
.outer:hover .box1{
display:block;
cursor:pointer;
}
check the fiddle: http://jsfiddle.net/sandeep/XLTV3/1/
Solution 3:
With jQuery, absolutely:
$("#some_parent").hover(function ()
{
$(this).children("#some_child_div").show();
});