チェックは、次のjQueryの

Question

私は、ユーザーがボックスの上にマウスを移動された場合に検出し、次のコードを持っているとアイテムを推移しました。

しかし、ユーザーがツールチップ自体をホバーすると、ツールチップが消えてしまいます（もはやボックスをホバーしていないため）。だから私は、ツールチップがホバリングされている（つまり、次の要素がホバリングされた）かどうかをチェックしようとしています。もしそうなら、mouseoutイベントを無視してください。

ただし、toolTipHoverは常にfalseです。私は、#chartTooltipのmouseoverが真の変数値を返すことができる前に、mouseoutが完了したレース例外のために推測します。

どうすればこの問題を回避できますか？

Answer 1

#chartToolTipは.boxの外にあるとします。フラグ変数（toolTipHover）の代わりに、mouseleaveイベントtoElementプロパティをチェックするだけです。だから、例えば：ここで

$('.box').on('mouseleave', function(e){ 
    if (!$(e.toElement).is('.tooltip')){ 
    $('.tooltip').hide(); 
    } 
}) 

は一例です：https://jsfiddle.net/qvqafyf2/

$('.tooltip').hide(); 
 

 
$('.box').on('mouseover', function(e){ 
 
$('.tooltip').show(); 
 
}) 
 

 
$('.box').on('mouseleave', function(e){ 
 
    if (!$(e.toElement).is('.tooltip')){ 
 
    \t $('.tooltip').hide(); 
 
    } 
 
}) 
 

 
$('.tooltip').on('mouseleave', function(e){ 
 
\t if (!$(e.toElement).is('.box')){ 
 
    \t $(this).hide(); 
 
    } 
 
})

.box{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
} 
 

 
.tooltip{ 
 
    height: 50px; 
 
    width: 50px; 
 
    background: green; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
</div> 
 

 
<div class="tooltip"> 
 
    hi 
 
</div>

Answer 2

あなたはこのようなあなたの関数内の■はと#chartTooltip追加することができます。

$('.box , #chartTooltip').on('mouseover', function() 

はこちらfiddle