如何解决当离开目标div和弹出式div本身时，无法让mouseleave仅触发
我用js创建一个弹出对话框，当将鼠标悬停在某个元素上时会显示一个弹出div，并且每次我调整窗口大小时都会动态生成/创建这些元素。
当我将鼠标悬停在元素的.card-target-in div上时，它将弹出式div .album-floating-details-wrapper作为子元素添加到.album_container div。
现在，我只希望在以下情况下删除.album-floating-details-wrapper div：
mouseleave> .album-card-target-wrapper div或
mouseleave> .album-floating-details-wrapper div（弹出对话框本身）
我的JavaScript：
// mouse leave 'div.album-card-target-wrapper' > Remove Pop-up
$('body').on( "mouseleave","div.album-card-target-wrapper",function() {
$( 'div.album_container' ).find( '.album-floating-details-wrapper' ).remove();
});
// mouse leave 'div.album-floating-details-wrapper' > Remove Pop-up
$('body').on( "mouseleave","div.album-floating-details-wrapper",function() {
$( 'div.album_container' ).find( '.album-floating-details-wrapper' ).remove();
});
我的HTML：
<!-- album_container DIV -->
<div class="album_container" style="position: relative;">
<div class="justified-layout" style="height: 511px; width: 821px;">
<div aria-label="grid" aria-readonly="true" class="ReactVirtualized__Grid ReactVirtualized__List" role="grid" tabindex="0" style="Box-sizing: border-Box; direction: ltr; height: auto; position: relative; width: 821px; contain: layout; will-change: transform; overflow: visible;">
<div class="ReactVirtualized__Grid__innerScrollContainer" role="rowgroup" style="width: auto;/* height: 511px; */max-width: 821px;max-height: 511px;overflow: hidden;pointer-events: auto;/* position: relative; */">
<div data-row-key="row-0-4e951923-0caf-40a0-a0ed-ef902013d8a7" style="height: 511px; left: 0px; position: absolute; top: 0px; width: 821px;content-visibility: auto;">
<div class="c-justified-row" role="row">
<!-- The Element -->
<div class="c-justified-Box" style="width: 267px; height: 411px; left: 0px; /* top:0px; */">
<!-- album-card-target-wrapper DIV -->
<div class="album-card-target-wrapper safe_link">
<a title="Test" class="album-card-outer-link" href="http://localhost/test/public/picturealbum/test-picture-album-1">
<!-- The Pop-up Trigger DIV -->
<div class="card-target-in" data-album-slug="test-picture-album-1" data-left="0" data-Box-width="267"></div>
<div style="contain: strict; width: 267px; height: 511px;">
<div class="album-card-cover">
<img width="267" height="411" alt="Teste" src="http://localhost/test/public/img/frontend/thumbnail/picture/3/1556531837700download33.jpg" class="safe_link c-fitted-media c-fit--center" loading="lazy">
</div>
<div class="album-card" style="height: 100px;">
<h5 class="album-card-title">rreeew</h5>
<div class="album-card-info">test-picture-album-1</div>
<div class="album-card-number">56 pictures</div>
</div>
</div>
</a>
</div>
</div>
<!-- .. Other Elements etc -->
</div>
</div>
</div>
</div>
</div>
<!-- the pop-up DIV : album-floating-details-wrapper DIV when added /removed -->
<!-- always append as last child to album_container DIV -->
<div class="album-floating-details-wrapper" style="position: absolute; width: 350px; left: 267px; top: 0px;">
<div class="album-floating-details-panel album-floating-details-shadow o-justified-row--details">
<span class="element-detail-caret-left" style="position: absolute; top: 178px; left: -16px;"></span>
<div>
<div>
<h3 class="o-h3 o-row-gut-half"><a title="rreeew" href="undefined">rreeew</a></h3>
<div class="o-clear o-divider o-divider--large"></div>
<div class="o-row-gut-1"><a href="http://localhost/lounge55/public/user/d7v9lqk4ym/profile"><img width="20" height="20" src="http://localhost/lounge55/public/img/20/20/cropResize/avatars/1/WTlvNXKdTJAIYLzEnGySAj0ZltV9UHFRspPCEskB.jpeg" class="avatar-image" role="presentation" crossorigin="anonymous"></a><span class="o-margin-left"><a href="http://localhost/lounge55/public/user/d7v9lqk4ym/profile"><span class="username-display">nAdmin</span></a></span></div>
<div class="album-info-wrapper" style="overflow: hidden;">
<div class="album-info"><span class="album-info-item">56 pictures</span><span class="album-info-item"><strong>Created: </strong>8 hours ago</span><span class="album-info-item"><strong>Last Updated:</strong> 7 hours ago</span></div>
<div class="album-info">
<div class="album-info-item"><strong class="o-text--capitalize">Genres: </strong><a class="o-tag" href="/genres/3d-digital-art_25/">3D / Digital Art</a>,<a class="o-tag" href="/genres/superheroes_17/">Superheroes</a>,<a class="o-tag" href="/genres/video-games_15/">Video Games</a></div>
<div class="album-info-item"><strong>Content: </strong><a href="/hentai/">Hentai</a></div>
</div>
<div class="o-tag--see-more">See More</div>
</div>
</div>
<div class="o-clear o-row-gut-2"></div>
</div>
</div>
</div>
</div>
我的问题：
在mouseleave .album-card-target-wrapper上打开时，弹出对话框（div.album-floating-details-wrapper）将按预期删除。
弹出式对话框div.album-floating-details-wrapper直观地直接显示在.album-card-target-wrapper旁边，但是一旦它越过边界进入.album-floating-details-wrapper div，.album-floating-details-wrapper就被删除了，我想要{{ 1}}保留，只有在.album-floating-details-wrapper mouseleave div或.album-card-target-wrapper div本身弹出时才将其删除
注意：动态添加/删除时，我想在.album-floating-details-wrapper div下将div.album-floating-details-wrapper div作为子项保留
显示我的问题的屏幕截图：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
