hover effect and function in jquery

I have a goal <div class="outter"> and another 开发者_开发百科<div class="inner"> as tooltip,

<div class="outter"></div>
<div class="inner"></div>

in default the tooltip is invisible , when I mouse hover on the "outter",the "inner" will appear in the "outter" one ,until mouse out the "outter" , the "inner" will disppear.

$(".outter").hover(function(){
   var $top=$(".outter").offset().top;
   var $left=$(".outter").offset().left;

   $('.inner').css({'top':$top+10+'px','left':$left+10+'px'}).show();
},function(){
    $('.inner').hide();
})

but when the mouse have not move out from the "outter" ,at the same time mouse on the "inner" in "outter",the problem happened: the inner one flashed, not stable

the online case here

So what's wrong with the case ?

I want the inner one would stable ,not the flashed.Please help,thank you:)

If it's an option, the easiest solution is to use your elements like they're named:

<div class="outter">
  <div class="inner"></div>
</div>

...then your current code works fine, since the mouseleave won't trigger when entering the .inner element, since it's a child. You can test it here.

This might not be the ideal solution but try this one

$(".outter, .inner").hover(function(){
   var $top=$(".outter").offset().top;
   var $left=$(".outter").offset().left;

   $('.inner').css({'top':$top+10+'px','left':$left+10+'px'}).show();
},function(){
    $('.inner').hide();
})

updated demo