问题描述
我用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 (将#修改为@)