Can I hide a parent div when I hover on it's child div element?

Question

Is there a way to hide a parent div when I hover over a div inside it.

<div class="parent" style="width:500px; height:800px;">
<div class="child" style="width:250px; height:250px; margin:250px auto 0 auto;">
</div>
</div>

I want to hover on the child to make it disappear both the parent and child div elements.

If there is a way even with jquery / javascript then please let me know.

I have 4 parent div and their respective child div and when I hover on another parent div then the hidden div re-appears.

Answer 1

For that you can use jquery hover.

$('.child').hover(function(){
    $(this).parent().hide();
});

DEMO

Note: hover function can handle both mouseover and mouseenter and it is best to handle UI element.For example: Fiddle

Answer 2

$('.child').hover(function(){
   $(this).parent().hide();
}, 
function(){
   $(this).parent().show();
});

Demo:

http://jsfiddle.net/JsmVm/

Answer 3

$('.child').on('mouseover',function(){
    $(this).parent().hide();
});

Answer 4

You can use mouseenter event, then hide the closest parent like this

$('.child').on('mouseenter',function(){
    $(this).closest('.parent').hide();
});

DEMO