How to put a div in other div nd show him when th mouse is in the first or second div

How to put a div in other div nd show him when th mouse is in the first or second div

Basically, i have 2 div  with css(position:absolute)
First div is it a 100x100, and second 30x30
The second div is hide and is located in the center of th first div.

When the mouse is mouseover de the first div then show the second, and when is leave form first then hide the second div

$('#div1').mouseover(function(){
   $("#div2").show();
});

$('#div1').mouseout(function(){
   $("#div2").hide();
});


it ok, but when i mouve the mouse on the second div then the mouseover property is hide the div and show.
is like a infinite loop.

i want to show the second div until the mouseout the first div in totality.

Thanks, amic.