親がマウスを親から離れる場合は要素を隠す

Question

私は2つのdivを持ち、親は100 * 100pxと言うことにします。ユーザーが親を移動すると、内容の小さなポップアップが表示されます（絶対的に片側に配置されます）。このdivはツールチップのようなもので、100px divの子です。今、親divを離れるとき、マウスが親100px * 100pxの領域を離れる場合でも、子は非表示にする必要があります。

どうすればこの問題を解決できますか？

Answer 1

あなたは簡単に親の上の要素にCSSスタイルを割り当てることができます。たとえば、以下の

.tooltip { 
    display: none; 
} 
:hover .tooltip { 
    display: block; 
} 

Answer 2

チェックを置きます。この解決のために

#parent { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: palegreen; 
 
} 
 
#child { 
 
    position: absolute; 
 
    display: none; 
 
    background-color: green; 
 
    color: white; 
 
} 
 
#parent:hover #child { 
 
    display: block; 
 
} 
 
#parent:hover #child:hover { 
 
    display: none; 
 
}

<div id="parent"> 
 
    <div id="child"> 
 
    some content for the popup 
 
    </div> 
 
</div>

Answer 3

私はjQueryの

$('#parent').on('mouseleave', function() { 
 
    $('#child').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="child">Child Text</div> 
 
    Parent Text 
 
</div>