我正尝试在弹出窗口的地图上显示地址,如下图所示。
弹出窗口的图像:
当我将鼠标悬停在图钉图标上时,会出现弹出窗口,但是当我移动到弹出窗口时,它就会消失。
我正在使用的Javascript:
<script>
jQuery(function($) {
var pop = $('.map-popup');
pop.click(function(e) {
e.stopPropagation();
});
$('a.marker').hover(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).next('.map-popup').toggleClass('open');
$(this).parent().siblings().children('.map-popup').removeClass('open');
});
$(document).click(function() {
pop.removeClass('open');
});
pop.each(function() {
var w = $(window).outerWidth(),
edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
if( w < edge ) {
$(this).addClass('edge');
}
});
});
</script>
密码笔链接:codepen
答案 0 :(得分:2)
代替
$('a.marker').hover(function(e) {
使用
$('a.marker').mouseenter(function(e) {
hover
处理mouseenter和mouseleave事件。如果您不为mouseleave传递处理程序,它将为mouseenter执行该函数,因此在您的情况下,
$(this).next('.map-popup').toggleClass('open');
对mouseleave
再次执行,因此弹出窗口被隐藏。 了解更多here。