私は2つのdivを持ち、親は100 * 100pxと言うことにします。ユーザーが親を移動すると、内容の小さなポップアップが表示されます(絶対的に片側に配置されます)。このdivはツールチップのようなもので、100px divの子です。今、親divを離れるとき、マウスが親100px * 100pxの領域を離れる場合でも、子は非表示にする必要があります。親がマウスを親から離れる場合は要素を隠す
どうすればこの問題を解決できますか?
私は2つのdivを持ち、親は100 * 100pxと言うことにします。ユーザーが親を移動すると、内容の小さなポップアップが表示されます(絶対的に片側に配置されます)。このdivはツールチップのようなもので、100px divの子です。今、親divを離れるとき、マウスが親100px * 100pxの領域を離れる場合でも、子は非表示にする必要があります。親がマウスを親から離れる場合は要素を隠す
どうすればこの問題を解決できますか?
あなたは簡単に親の上の要素にCSSスタイルを割り当てることができます。たとえば、以下の
.tooltip {
display: none;
}
:hover .tooltip {
display: block;
}
シンプルで簡単! – Pugazh
チェックを置きます。この解決のために
#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>
私の状況のコンテンツは、親から去っています。私が子供の上にいても、親にはもういなくて、緑の領域を離れたとき、子供は隠されません。 – wernersbacher
@wernersbacher:更新された回答を確認してください! – Pugazh
私は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>
を使用して、関連するコードを追加してくださいよ。 –