Show child div on mouse hover of parent - needs javascript?

Question

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

Answer 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>

Answer 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/

Answer 3

I initially was using css solution above, but had to use jQuery because my child div contained an image which caused hover to flicker. Here we're displaying child when hovering over parent (if desktop screen size) on mouseenter and hiding it on mouseleave but only if now hovering over main page container, to minimize flickering:

$(document).ready(function () {
    $(".parent-qtip").mouseenter(function () {
        if ($(window).width()>=1200)
            $(this).children(".child-qtip").show();
    });
    $(".parent-qtip").mouseleave(function () {
        if ($('.page-content').find('.container:hover').length)
            $('.child-qtip').hide();
    });
});

Answer 4

Since it's a child element you don't need javascript. Here is an example.

Answer 5

With jQuery, absolutely:

$("#some_parent").hover(function ()
{
    $(this).children("#some_child_div").show();
});

Answer 6

Using jQuery you can add a mouseover event to the parent div, and show the child div. See this fiddle as an example.