Javascript 无法使mouseleave仅在离开目标div和弹出div本身时触发
我用js创建了一个弹出对话框，当鼠标悬停在某个元素上时，该对话框将显示一个弹出div，每次我调整窗口大小时，都会动态生成/创建这些元素 当我将鼠标悬停在元素的div中的Javascript 无法使mouseleave仅在离开目标div和弹出div本身时触发,javascript,jquery,mouseevent,mouseenter,mouseleave,Javascript,Jquery,Mouseevent,Mouseenter,Mouseleave,我用js创建了一个弹出对话框，当鼠标悬停在某个元素上时，该对话框将显示一个弹出div，每次我调整窗口大小时，都会动态生成/创建这些元素 当我将鼠标悬停在元素的div中的.card target上时，它会将弹出的div.album floating details wrapper作为子对象添加到.album\u containerdiv中 现在，我只希望在以下情况下删除.album floating details wrapperdiv： mouseleave。相册卡目标包装器div或 mouse
.card target上时，它会将弹出的div.album floating details wrapper
作为子对象添加到.album\u container
div中
现在，我只希望在以下情况下删除.album floating details wrapper
div：
mouseleave
。相册卡目标包装器
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();
});
<!-- 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>
我的HTML:
// 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();
});
<!-- 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>
56张图片已创建：8小时前上次更新：7小时前
类型：，
内容：
查看更多
我的问题：
// 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();
});
<!-- 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>
启用时，将按预期删除弹出对话框（div.album-floating-details-wrapper
）
弹出对话框div.album-floating-details-wrapper
直接显示在旁边。album-card-target wrapper
可视，但一旦越过边界进入。album-floating-details wrapper
div，。album-floating-details wrapper
已被删除，我希望album-floating-details wrapper
留下来，并且仅当mouseleave
.album-card-target-wrapper.album-floating-details-wrapperdiv.album-floating-details-wrapper.album\u容器下的弹出窗口中
显示我的问题的屏幕截图：
// 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();
});
<!-- 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>