Hover-Effekt und Funktion in Jquery

Question

Ich habe ein Ziel <div class="outter"> und andere <div class="inner"> als Tooltip,

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

in Standard der Tooltip unsichtbar ist, wenn ich die Maus schweben auf dem „outter“, wird die „innere“ erscheinen im "outter" eins, bis man den "outter" aussticht, wird das "innere" verschwinden.

$(".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(); 
}) 

aber, wenn die Maus nicht aus dem „outter“ ausrücken hat, zugleich Maus auf dem „inneren“ in „outter“, das Problem geschieht: die innere geflasht, nicht stabil

the online case here

Also, was ist los mit dem Fall?

Ich möchte die innere wäre stabil, nicht die flashed.Please Hilfe, danke :)

Answer 1

Wenn es eine Option ist, ist die einfachste Lösung, Ihre Elemente wie sie genannt zu verwenden:

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

... dann funktioniert Ihr aktueller Code gut, da der mouseleave nicht ausgelöst wird, wenn Sie das .inner Element eingeben, da es ein Kind ist. You can test it here.

Answer 2

Dies ist vielleicht nicht die ideale Lösung sein, sondern versuchen, diese ein

$(".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