鼠标悬停时弹出窗口消失

Question

我正尝试在弹出窗口的地图上显示地址，如下图所示。

弹出窗口的图像：

当我将鼠标悬停在图钉图标上时，会出现弹出窗口，但是当我移动到弹出窗口时，它就会消失。

我正在使用的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

Answer 1

代替

$('a.marker').hover(function(e) {

使用

$('a.marker').mouseenter(function(e) {

hover处理mouseenter和mouseleave事件。如果您不为mouseleave传递处理程序，它将为mouseenter执行该函数，因此在您的情况下，

$(this).next('.map-popup').toggleClass('open');

对mouseleave再次执行

，因此弹出窗口被隐藏。 了解更多here。