我正在尝试使用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;
}
我正在尝试使用JavaScript和CSS创建自定义悬停。一切正常,我可以切换班级以显示和隐藏弹出/悬停气泡。 (弹出式正文)但是,我想...
我可能会误解您,但是如果您只是希望在离开位置时身体消失,为什么不将mouseexit函数添加到that