javascript - 悬停在内容/正文上时保持弹出悬停内容打开
问题描述
我正在尝试使用 javascript 和 css 创建自定义悬停。
一切都很好,我可以切换类以显示和隐藏弹出/悬停气泡。(弹出体)
但是,我希望当光标悬停在气泡上时气泡也保持打开状态。(弹出体)
这在离开弹出链接后立即关闭,如果我在弹出主体内呈现任何链接,这会使悬停动作无用。请帮忙!
HTML/ERB
<div class="popup-container">
<span class="popup-link">Partner disclosure</span>
<span class="popup-body popup-bottom">
<h3>Partner relationships</h3>
<p>stuffs in popup body</p>
</span>
</div>
Javascript
$(document).on('mouseleave click', '.popup-body', function() {
$(".popup-body").removeClass('show-popup');
})
### if mobile device
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$(document).on('click', '.popup-link', function() {
var popupContent = $(this).parent('.popup-container').find('.popup-body');
if (!popupContent.hasClass('show-popup')) {
popupContent.addClass('show-popup');
} else {
popupContent.removeClass('show-popup');
}
})
$(document).on('touchstart', '.page-content', function(e) {
if ( !e.target.classList.contains(".popup-body") ) {
$(".popup-body").removeClass('show-popup');
}
});
} else { ###desktop
$(document).on('mouseenter', '.popup-link', function() {
var popupContent = $(this).parent('.popup-container').find('.popup-body');
popupContent.addClass('show-popup');
})
$(document).on('click', '.page-content', function(e) {
if ( !e.target.classList.contains(".popup-body") ) {
$(".popup-body").removeClass('show-popup');
}
});
}
CSS
.popup-container {
position: relative;
display: inline-block;
background: none;
cursor: pointer;
}
.popup-container .popup-body {
visibility: hidden;
position: absolute;
width: 676px;
background-color: $color-white;
color: #000;
text-align: left;
padding: 30px;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
-webkit-box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.popup-container .show-popup {
visibility: visible;
opacity: 1;
@include susy-breakpoint(0 $breakpoint-tablet-landscape, 8) {
width: 350px;
}
}
.popup-bottom {
top: 135%;
left: 50%;
margin-left: -60px;
}
.popup-bottom::after {
content: "";
position: absolute;
display: block;
bottom: 100%;
left: 5%;
margin-left: -5px;
border-width: 0 10px 8px;
border-style: solid;
border-color: #fff transparent;
}
.popup-link {
color: $color-brand-1;
text-decoration: none;
font-weight: bold;
}
.popup-link:hover {
color: $color-link-hover;
text-decoration: none;
font-weight: bold;
}
解决方案
我可能会误解你,但如果你只是想让身体离开它的位置时离开,为什么不向那个元素添加 mouseexit 函数呢?这是我所指的,在一个片段中。
$(document).on('mouseenter click', '.popup-link', function() {
var popupContent = $(this).parent('.popup-container').find('.popup-body');
popupContent.addClass('show-popup');
})
$(document).on('mouseleave', '.popup-body', function() {
$(".popup-body").removeClass('show-popup');
})
$(document).on('click touch', function(e) {
if ( !e.target.classList.contains(".popup-body") ) {
$(".popup-body").removeClass('show-popup');
}
});
.popup-container {
position: relative;
display: inline-block;
background: none;
cursor: pointer;
}
.popup-container .popup-body {
visibility: hidden;
position: absolute;
width: 676px;
background-color: $color-white;
color: #000;
text-align: left;
padding: 30px;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
-webkit-box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.popup-container .show-popup {
visibility: visible;
opacity: 1;
@include susy-breakpoint(0 $breakpoint-tablet-landscape, 8) {
width: 350px;
}
}
.popup-bottom {
top: 135%;
left: 50%;
margin-left: -60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup-container">
<span class="popup-link">Partner disclosure</span>
<span class="popup-body popup-bottom">
<h3>Partner relationships</h3>
<p>stuffs in popup body</p>
</span>
</div>
推荐阅读
- javascript - 编辑图像幻灯片的 javascript
- android - 有没有办法增加 Android DEX 64k 限制?
- python - 读取 txt 文件并将各个列保存为列表
- javascript - 我想在 Angular Dashboard 上调整内容,以便所有内容都显示而无需向下滚动
- reactjs - 尝试导入错误:“_”未从“下划线”导出
- python - 通过python将数据框过滤到csv中
- android - 如何在 LinearLayout 的另一侧放置两个视图
- solr - Solr 的 /sql 请求处理程序如何在没有包含任何数据的集合的情况下工作?
- list - Flutter:正确查看嵌套列表数据:已编辑 #2
- elasticsearch - 自定义字段的倒排索引